按类名删除元素？

IT技术 javascript removeclass
2021-02-12 15:58:17

我有以下代码来查找具有类名的元素：

// 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++) {

}

我只是不知道如何删除它们......我是否必须引用父级或其他内容？处理这个问题的最佳方法是什么？

@卡里姆79：

这是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 选项。

6个回答

如果您不想使用 JQuery：

function removeElementsByClass(className){
    const elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}
那里有数量惊人的非工作解决方案。这是对的。谢谢！
2021-03-21 15:58:17
关于元素数组缩小这一事实的好观察
2021-03-29 15:58:17
如果有人想知道为什么他总是删除第一个元素（索引 0），那是因为当你删除一个元素时，它也会缩小elements数组。
2021-04-03 15:58:17
@ofir_aghai as @JeffersonLima 指出这getElementsByClassName是一个现场收藏。developer.mozilla.org/en-US/docs/Web/API/NodeList
2021-04-06 15:58:17
JQuery 是巨大的 lib 很多依赖项，不一定使用 +1 来不使用 jquery。
2021-04-07 15:58:17

使用 jQuery（我认为在这种情况下你真的可以使用它），你可以这样做：

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

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

element.parentNode.removeChild(element);
+0.75 使用 jQuery，+0.25 还提供非 jQuery 解决方案：p
2021-03-19 15:58:17
+0.01 使用 jQuery，+0.99 也提供非 jQuery 解决方案：p
2021-03-24 15:58:17

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

在没有 jQuery 或 ES6 的纯原生 Javascript 中，您可以执行以下操作：

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

while (elements.length > 0) elements[0].remove();
也许您的答案是稍后出现的 - 应该是公认的，因为它不依赖于 jQuery。一般来说，最好使用 vanilla-js，不是吗？
2021-03-22 15:58:17
没有 jQuery 和 ES6 的最清晰答案
2021-03-23 15:58:17
没有不必要的和 bloady jQuery 的最佳答案。对 jQuery 说不。是的香草冰！
2021-03-30 15:58:17
这个使用 Elementor 页面构建器在 WordPress 上工作，并添加一个 HTML 元素来添加 JavaScript，而无需为 Pro 版本付费
2021-04-07 15:58:17

一条线

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

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

document.querySelectorAll(".user-info").forEach(el => el.remove());
非常便利！谢谢
2021-03-30 15:58:17
其它你可能感兴趣的问题
上一篇墨卡托经纬度计算（英国）裁剪地图上的 x 和 y 下一篇如何找出touchmove javascript事件的实际event.target？