按类名删除元素？

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选项.

Answer 1

使用jQuery(我认为你可以在这种情况下使用它),你可以这样做:

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

否则,您将需要使用每个元素的父元素来删除它:

element.parentNode.removeChild(element);

Answer 2

如果您不想使用JQuery:

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

Answer 3

使用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>

Answer 4

一条线

document.querySelectorAll(".remove").forEach(el => el.remove());

例如，您可以在此页面中删除用户信息

document.querySelectorAll(".user-info").forEach(el => el.remove());

Answer 5

没有jQuery,你可以这样做:

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

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

Answer 6

Brett - 你知道根据quirksmodegetElementyByClassName,IE 5.5到8的支持不存在吗？如果您关心跨浏览器兼容性,最好遵循此模式:

• 按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]);
    }
}

这是一个快速演示.

编辑:这是固定版本,特定于您的标记:

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中删除每个元素.

在这里试试吧.

Answer 7

这适合我

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

Answer 8

我更喜欢使用forEachover for/while循环。为了使用，必须先转换HTMLCollection为：Array

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

请注意，这不一定是最有效的方法。对我来说更加优雅。