How to delete and insert things using JS?

[njfail]

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?

<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

[VIPStephan]

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?

[felgall]

Originally Posted by njfail

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:

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.

[njfail]

Originally Posted by VIPStephan

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.

[xelawho]

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:

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

[felgall]

Originally Posted by njfail

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.

[xelawho]

Originally Posted by VIPStephan

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?

[njfail]

Originally Posted by felgall

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

[rnd me]

why not simply hide it with css?

.ui-tabs-nav .ui-state-default { display: none; }
.ui-tabs-nav .ui-state-default:first-child { display: list-item; }

[njfail]

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

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>

[njfail]

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?

$(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;

});