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

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

// 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>

Edit: Ну в конечном итоге просто с помощью опции jQuery.

71
javascript removeclass

12 ответов

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

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

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

element.parentNode.removeChild(element);
121

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

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

используя 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>
14

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

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

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

Бретт-ты знаешь, что 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.

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

10

Я предпочитаю использовать forEach над for/while зацикливание. Для того, чтобы использовать его необходимо преобразовать HTMLCollection до Array первый:

Array.from(document.getElementsByClassName("post-text"))
    .forEach(element => element.remove());

обратите внимание, это не обязательно самый эффективный способ. Просто гораздо элегантнее для меня.

3

это работает для меня

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }
2

Да, вы должны удалить из родителя:

cur_columns[i].parentNode.removeChild(cur_columns[i]);
1

Вы можете использовать следующий синтаксис: node.parentNode

например:

someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);
0

Если вы хотите удалить элементы, которые добавляются динамически, попробуйте следующее:

document.body.addEventListener('DOMSubtreeModified', function(event) {
    const elements = document.getElementsByClassName('your-class-name');
    while (elements.length > 0) elements[0].remove();
});
0

ошибка пропуска элементов в этом (код сверху)

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

можно исправить, просто запустив цикл назад следующим образом (так что временный массив не нужен)

var len = cells.length;
for(var i = len-1; i >-1; i--) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[i]);
   }
}
-1

вы можете использовать простое решение, просто измените класс, фильтр коллекции HTML обновляется:

var cur_columns = document.getElementsByClassName('column');

for (i in cur_columns) {
   cur_columns[i].className = '';
}

Ref: http://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html

-2