JavaScript: remove a certain class from an element from an element

Question

Hello!

Tell me, please, how in JavaScript (without using Jquery and other libraries) from the set of <div> elements of the classes to remove a certain?

For the function to work in IE6, i.e. classList.remove(''); will not go.

For example:

 <div id="id1"> <div class="myclass1 item_checked">1</div> <div class="myclass2 item_checked">2</div> <div class="myclass3 nextclass3 item_checked">3</div> <div class="myclass4 nextclass4 item_checked">4</div> <div class="myclass5 nextclass5">5</div> </div>

It is necessary for all <div> blocks to remove only the class item_checked , to succeed:

 <div id="id1"> <div class="myclass1">1</div> <div class="myclass2">2</div> <div class="myclass3 nextclass3">3</div> <div class="myclass4 nextclass4">4</div> <div class="myclass5 nextclass5">5</div> </div>

Thank!

Stepan Kasyanenko Stepan Kasyanenko 6.186 6 23 · Accepted Answer · 2016-09-20T05:58:50

You can try this:

 function removeClass(obj, name) { var clsList = obj.className.split(" "); //Получаем массив классов var result = []; for (var i = 0; i < clsList.length; i++) { if (clsList[i] != name) //Проверяем наличие класса result.push(clsList[i]); } obj.className = result.join(" "); //Я не уверен, есть ли IE6 join. Если нет, придется делать цикл. } function removeClick() { var divs = document.getElementsByTagName('div') for (var i = 0; i < divs.length; i++) { removeClass(divs[i], "item_checked"); } }

 .item_checked { color: red; } .fooitem_checkedbar { color: green; }

 <div id="id1"> <div class="myclass1 item_checked">1</div> <div class="myclass2 item_checked">2</div> <div class="myclass3 nextclass3 item_checked">3</div> <div class="myclass4 nextclass4 item_checked item_checked">4 - with two item_checked class</div> <div class="myclass5 nextclass5 fooitem_checkedbar">5 - with fooitem_checkedbar</div> </div> <button onclick="removeClick()">Remove item_checked</button>

At the time of ie6, it even worked faster than string concatenation in a loop.
Sometimes I met recommendations to optimize the construction of a long line in this way.
I apologize for the last comment - did not look that indexOf IE9 +

Answer 2 · 2016-09-20T06:53:50

 function foo() { var x = document.getElementById("id1").getElementsByClassName("item_checked"); var z = x.length; for (var i = 0; i < z; i++) { var y = x[0].className; k = /\bitem_checked\b/i; x[0].className = y.replace(k, ''); } console.log(document.getElementById("id1").getElementsByTagName("div")) }

 .item_checked { color: red }

 <div id="id1"> <div class="myclass1 item_checked">1111111</div> <div class="myclass2 item_checked">222222</div> <div class="myclass3 nextclass3 item_checked">33333333</div> <div class="myclass4 nextclass4 item_checked">4444444</div> <div class="myclass5 nextclass5 foritem_checkedee item_checked">55555555</div> <div class="myclass5 nextclass5 item_checked foritem_checkedee ">66666666</div> </div> <button onclick="foo()">click me</button>

And if myclass5 are both item_checked and item_checked styles in item_checked foritem_checkedee , then foritem_checkedee will not be replaced by fordee
Because you take all the item_checked with the item_checked class.
@StepanKasyanenko no need to make my code better ... You can always find a better option.

Answer 3 · 2016-09-19T19:26:58

 var arr = document.getElementsByTagName('div'); // загрузить в массив все доступные теги div for (key in arr) { // выбирать каждый тег div из массива var s = arr[key].getAttribute('class'); // в s положить содержимое атрибута очередного тега div if (s !== null) // если нет атрибута-class пропускаем if (s.lastIndexOf('item_checked') > 1) // если в s есть слово item_checked - значит это то что нам нужно arr[key].setAttribute('class', s.substr(0, s.length - 13)); // установить атрибут class укороченной строкой s на 13 символов (это длина слова item_checked + пробел перед ним) console.log(arr[key]); // вывод в лог браузера для демонстрации }

 <div id="id1"> <div class="myclass1 item_checked">1</div> <div class="myclass2 item_checked">2</div> <div class="myclass3 nextclass3 item_checked">3</div> <div class="myclass4 nextclass4 item_checked">4</div> <div class="myclass5 nextclass5">5</div> </div>

Your code will behave incorrectly if the element has a class like fooitem_checkedbar
@PavelMayorov was a specific question, doesn’t seem to count
I am sure the author of the question would be grateful for your expert commentary on the code above.

JavaScript: remove a certain class from an element from an element

3 answers 3

More articles: