Удаление элементов по имени класса?

Question

Удаление элементов по имени класса?

У меня есть код ниже, чтобы найти элементы с их именем класса:

// Get the element by their class name
var cur_columns = document.getElementsByClassName('column');

// Now remove them

for (var i = 0; i < cur_columns.length; i++) {

}

Я просто не знаю, как их удалить ..... У меня есть ссылка на родителя или что-то в этом роде? Каков наилучший способ справиться с этим?

@ Karim79:

Вот JS:

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");
var len = col_wrapper.length;

alert(len);

for (var i = 0; i < len; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        col_wrapper[i].parentNode.removeChild(col_wrapper[i]);
    }
}

Вот HTML:

<div class="columns" id="columns">
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
    <div name="columnClear" class="contentClear" id="columnClear"></div>
</div>

Редактировать: В итоге закончилось использование опции jQuery.

javascript,removeclass,

71

Ответов: 12

JavaScript, removeclass,

Похожие вопросы

score 122 · Accepted Answer

122 принят

используя jQuery (который вы действительно можете использовать в этом случае, я думаю), вы можете сделать это так:

$('.column').remove();

В противном случае вам понадобится использовать родительский элемент для каждого элемента, чтобы удалить его:

element.parentNode.removeChild(element);

score 113 · Accepted Answer

113

Если вы предпочитаете не использовать JQuery:

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

score 14 · Accepted Answer

уя 14

Используя ES6, вы можете сделать так:

const removeElements = (elms) => [...elms].forEach(el => el.remove());

// Use like:
removeElements( document.querySelectorAll(".remove") );

<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>

score 12 · Accepted Answer

12 ов

Без jQuery вы можете сделать:

const elements = document.getElementsByClassName("my-class");

while (elements.length > 0) elements[0].remove();

score 10 · Accepted Answer

10

Бретт - вы знаете, что getElementyByClassNameподдержка от IE 5.5 до 8 не существует в соответствии с quirksmode ?. Вам будет лучше следовать этой схеме, если вам нужна совместимость между браузерами:

Получить контейнерный элемент по ID.
Получите необходимые дочерние элементы по имени тега.
Итерация над детьми, проверка соответствия свойства className.
elements[i].parentNode.removeChild(elements[i]) как говорили другие ребята.

Быстрый пример:

var cells = document.getElementById("myTable").getElementsByTagName("td");
var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
    }
}

Вот быстрая демонстрация.

EDIT: Вот фиксированная версия, специфичная для вашей разметки:

var col_wrapper = document.getElementById("columns").getElementsByTagName("div");

var elementsToRemove = [];
for (var i = 0; i < col_wrapper.length; i++) {
    if (col_wrapper[i].className.toLowerCase() == "column") {
        elementsToRemove.push(col_wrapper[i]);
    }
}
for(var i = 0; i < elementsToRemove.length; i++) {
    elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
}

Проблема была в моей ошибке; когда вы удаляете элемент из результирующего массива элементов, длина изменяется, поэтому один элемент пропускается на каждой итерации. Решение состоит в том, чтобы хранить ссылку на каждый элемент во временном массиве, а затем контур над ними, удаляя каждый из DOM.

Попробуйте здесь.