Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to delete and insert things using JS?

    Hello everyone!

    I'm using software on a site that only allows me to insert changes using a js file and a css file.
    Sadly, I'm not familiar with js.

    There is a snipit of code that I want to remove.
    There are 4 tabs below, I want to remove the first 3.
    How can I remove them using js?

    Code:
    <ul class="ui-tabs-nav">
    	<li class="ui-state-default">
    		<a href="#tabs-1">tab1</a>
    	</li>
    	<li class="ui-state-default">
    		<a href="#tabs-2">tab2</a>
    	</li>
    	<li class="ui-state-default">
    		<a href="#tabs-3">tab3</a>
    	</li>
    	<li class="ui-state-default">
    		<a href="#tabs-4">tab4</a>
    	</li>
    </ul>
    Out of curiousity, how would I add in things using JS?
    Suppose I wanted to change the "tab4" text to something else?

    Thank you all for the help over the past few years

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Seeing the “ui-…” class names I suppose you are using jQuery, right? I’m gonna move the thread to the JS frameworks section.

    Now, would you mind to share with us why you want to remove and change the items with JS rather than by just editing the HTML? In which context is this being used?

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by njfail View Post
    Out of curiousity, how would I add in things using JS?
    Suppose I wanted to change the "tab4" text to something else?
    To do that with ordinary JavaScript (without JQuery) you could use:

    Code:
    li = document.getElementsByClassName('ui-state-default');
    len = li.length;
    for (i = 0;i < len; i++) {
       if (li[i].firstChild.href == '#tabs-4') {
          li[i].firstChild.innerHTML = ';replacement text';
       }
    }
    Note that assumes that all the <li> tags have an <a> tag as the first tag inside them so if some of them don't you'd need to add extra code to find the <a> tags. Also if you want it to work on really old browsers you'd need to add code to define getElementsByClassName.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Seeing the “ui-…” class names I suppose you are using jQuery, right? I’m gonna move the thread to the JS frameworks section.

    Now, would you mind to share with us why you want to remove and change the items with JS rather than by just editing the HTML? In which context is this being used?

    Hey Stephan,
    I cannot edit the HTML, because I do not have access to edit the HTML file. I can only edit it by appending a .js file and a .css file.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    one of the best ways to deal with things like lists is to iterate over them with the each method, which keeps an index that you can use to operate on elements according to their position:

    Code:
    $(".ui-tabs-nav li").each(function (idx) {
        if (idx != 3) {
            $(this).remove()
        } else {
            $(this).text("whatever")
        }
    });

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by njfail View Post
    Hey Stephan,
    I cannot edit the HTML, because I do not have access to edit the HTML file. I can only edit it by appending a .js file and a .css file.
    No one has suggested editing the HTML. All the code supplied has been JavaScript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Quote Originally Posted by VIPStephan View Post
    Now, would you mind to share with us why you want to remove and change the items with JS rather than by just editing the HTML?

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    No one has suggested editing the HTML. All the code supplied has been JavaScript.
    I was replying to VIPStephen. I quoted him asking me why I don't just edit the HTML, and answered his question.

    I appreciate all the JS tips! I will be trying these out tonight

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,276
    Thanks
    10
    Thanked 581 Times in 562 Posts
    why not simply hide it with css?

    Code:
    .ui-tabs-nav .ui-state-default { display: none; }
    .ui-tabs-nav .ui-state-default:first-child { display: list-item; }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello everyone, thanks for the help so far.
    I decided instead of removing them, I will just rename them using the JS that felgall supplied (Thanks!).

    I have another question;

    For each tab, it has a description inside it. I want to change the words in the description, so delete it and then rewrite it.
    Could someone tell me how I would do that? And could you try to explain each line of code so I can try to apply it to more situations

    Code:
    div id="tabs-1" class="row ui-tabs-panel ui-widget-content ui-corner-bottom">
    <section class="instructions">
    <h3>The fastest ad code in the world</h3>

  • #11
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey guys,
    I played around with the JS and I got something that kind of works...
    It does what I want it to do, but on some other pages, it messes things up. I've got no idea why its doing that. Everything after the favicon line is messing up other pages. I tried doing one set of replacing vars at a time and each one works, but also makes slight changes to other pages. There don't seem to be any shared ID's or classes though. So I think it might just be a syntax problem or something.. Is there a problem with the way I wrote this?

    Code:
    $(document).ready(function() {
    
    $('#networkname h1').append('<img id="logo" src="http://valueviewmedia.com/valueviewmedia.png"/>');
    
    $('#favicon').attr("href","http://valueviewmedia.com/favicon.ico");
    
    
    var haystackText = document.getElementById("adcode_tabs").innerHTML;
    
    var matchText = 'Standard';
    
    var replacementText = 'Advanced';
    
    var replaced = haystackText.replace(matchText, replacementText);
    
    document.getElementById("adcode_tabs").innerHTML = replaced;
    
    
    var haystackTexta = document.getElementById("adcode_tabs").innerHTML;
    
    var matchTexta = 'Email';
    
    var replacementTexta = 'HTML';
    
    var replaceda = haystackTexta.replace(matchTexta, replacementTexta);
    
    document.getElementById("adcode_tabs").innerHTML = replaceda;
    
    
    var haystackTextb = document.getElementById("adcode_tabs").innerHTML;
    
    var matchTextb = '3rd Party Ad Server';
    
    var replacementTextb = 'JavaScript';
    
    var replacedb = haystackTextb.replace(matchTextb, replacementTextb);
    
    document.getElementById("adcode_tabs").innerHTML = replacedb;
    
    var haystackTextc = document.getElementById("tabs-1").innerHTML;
    
    var matchTextc = 'The fastest ad code in the world';
    
    var replacementTextc = 'Advanced 2 part ad code';
    
    var replacedc = haystackTextc.replace(matchTextc, replacementTextc);
    
    document.getElementById("tabs-1").innerHTML = replacedc;
    
    
    var haystackTextd = document.getElementById("tabs-1").innerHTML;
    
    var matchTextd = 'Our standard ad code is 100% asychronous and loads all ad tags in a single call to the server. It is compatible with most third parties, including rich media providers. It won\'t work with some legacy rich media providers, if you need to support them use the Synchronous ad code.';
    
    var replacementTextd = 'This code is for advanced users. We recommend normal publishers use the JavaScript code tab. This advanced 2 part code is 100% asynchronous and loads all ad tags with a single call to the server.';
    
    var replacedd = haystackTextd.replace(matchTextd, replacementTextd);
    
    document.getElementById("tabs-1").innerHTML = replacedd;
    
    
    var haystackTexte = document.getElementById("tabs-3").innerHTML;
    
    var matchTexte = 'Serve Ads in Email';
    
    var replacementTexte = 'Basic HTML ad code';
    
    var replacede = haystackTexte.replace(matchTexte, replacementTexte);
    
    document.getElementById("tabs-3").innerHTML = replacede;
    
    
    var haystackTextf = document.getElementById("tabs-3").innerHTML;
    
    var matchTextf = 'Due to the nature of Email this ad code has limitations (including only being able to serve images and not flash or JavaScript/HTML.) It should only be used when Javascript code cannot be used.';
    
    var replacementTextf = 'We do not recommend using the HTML code. It is best to use the JavaScript code tab. The HTML code tab should only be used for specially approved Email advertising.';
    
    var replacedf = haystackTextf.replace(matchTextf, replacementTextf);
    
    document.getElementById("tabs-3").innerHTML = replacedf;
    
    
    var haystackTextg = document.getElementById("tabs-4").innerHTML;
    
    var matchTextg = 'Serve ads through other ad servers';
    
    var replacementTextg = 'Recommended - JavaScript ad code';
    
    var replacedg = haystackTextg.replace(matchTextg, replacementTextg);
    
    document.getElementById("tabs-4").innerHTML = replacedg;
    
    
    var haystackTexth = document.getElementById("tabs-4").innerHTML;
    
    var matchTexth = 'You can serve ads through other ad servers using this simple code. This code isn\'t 100% asychronous but can be served through a friendly iframe in another ad server to achieve 100% asychronous ad serving.';
    
    var replacementTexth = 'This is our standard ad code. Place this code in your website\'s HTML file in the place you want the ad to display. This code is asynchronous, meaning it will delay your website\'s content from loading.';
    
    var replacedh = haystackTexth.replace(matchTexth, replacementTexth);
    
    document.getElementById("tabs-4").innerHTML = replacedh;
    
    });


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •