按类名删除元素？答案

【问题标题】：Removing elements by class name?按类名删除元素？
【发布时间】：2011-01-23 22:47:16
【问题描述】：

我有下面的代码来查找带有类名的元素：

// 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 选项。

【问题讨论】：

老实说，最好的方法就是使用 jQuery。真不明白为什么有人想再手动进行 DOM 操作了。
我不知道，哈哈……我只是觉得知道框架我会觉得很脏，而且不知道能够实际使用 vanilla JS。因为我不是一个 JS 大佬，所以我在使用 vanilla JS 时尝试使用它来编写代码，这样我就不会忘记事情了，哈哈
对。到底谁会想成为一个知识渊博、全面发展的开发人员。荒谬！
当然是一个好方法，但仅仅因为您使用的是 jQuery，并不意味着您必须放弃理解它的工作原理或底层 DOM 提供的内容。如果你愿意，你可能会修理你的车（DOM），但你的机械师可能在这方面更有经验（jQuery 团队）。
@Lior：是的，我的机械师不需要帮我转动钥匙或摇下车窗。 ;o)

标签： javascript removeclass

【解决方案1】：

如果您不想使用 JQuery：

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

【讨论】：

大量不工作的解决方案。这是正确的。谢谢！
如果有人想知道为什么他总是删除第一个元素（索引 0），那是因为当你删除一个元素时，它也会缩小 elements 数组。
@ofir_aghai 正如@JeffersonLima 指出的那样，getElementsByClassName 是一个现场合集。 developer.mozilla.org/en-US/docs/Web/API/NodeList
JQuery 是一个巨大的库，很多依赖项不一定使用 +1 来表示不使用 jquery。
很好地观察到元素数组缩小的事实

【解决方案2】：

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

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

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

element.parentNode.removeChild(element);

【讨论】：

+0.75 用于使用 jQuery，+0.25 用于也提供非 jQuery 解决方案：p
+0.01 用于使用 jQuery，+0.99 用于也提供非 jQuery 解决方案：p

【解决方案3】：

在纯原生 Javascript 中，没有 jQuery 或 ES6，你可以这样做：

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

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

【讨论】：

没有 jQuery 和 ES6 的最清晰答案
也许你的答案稍后会出现 - 应该是被接受的，因为它不依赖于 jQuery。一般来说，使用 vanilla-js 会更好，不是吗？
最好的答案没有不必要的和 bloady jQuery。对 jQuery 说不。是的香草冰！
这一项在 WordPress 上使用 Elementor 页面构建器并添加 HTML 元素以添加 JavaScript，而无需支付专业版的费用

【解决方案4】：

使用Element.remove()

删除单个元素

document.querySelector("#remove").remove();

移除多个元素

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

如果你想要一个方便的可重用函数：

const remove = (sel) => document.querySelectorAll(sel).forEach(el => el.remove());

// Use like:
remove(".remove");
remove("#remove-me");

<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>
<p id="remove-me">REMOVE ME</p>

【讨论】：

【解决方案5】：

一行

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

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

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

【讨论】：

非常方便！谢谢

【解决方案6】：

这对我有用

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

【讨论】：

【解决方案7】：

Brett - 你知道从 IE 5.5 到 8 的 getElementyByClassName 支持是 not there according to 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]);
    }
}

Here's a quick demo.

编辑：这是固定版本，特定于您的标记：

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

Try it here.

【讨论】：

谢谢你 - 虽然这不是一个大问题，因为它是一个管理部分，所以真的会有人使用它......但仍然会考虑你的 cmets。
@Brett - 无论如何都要这样做！这将花费您几分钟的时间，您会在办公室获得额外的击掌：)
好的，我试过了...当我发出警报时它报告了正确数量的元素，但它只删除了具有该类名的四个元素中的两个，我收到了这个错误：col_wrapper[i]未定义。我将使用我使用的代码更新我的帖子。
@Brett - 如果您有兴趣，我修复了您更新的代码，并对问题发表了评论。
伙计，这对我的帮助超出了你的想象，解决了我在过去两个小时里一直困扰的问题。谢谢！

【解决方案8】：

我更喜欢使用forEach 而不是for/while 循环。要使用，必须先将HTMLCollection 转换为Array：

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

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

【讨论】：

【解决方案9】：

非常简单，单行，使用 ES6 扩展运算符由于 document.getElementByClassName 返回一个 HTML 集合。

[...document.getElementsByClassName('dz-preview')].map(thumb => thumb.remove());

【讨论】：

【解决方案10】：

如果你想删除动态添加的元素，试试这个：

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

【讨论】：

【解决方案11】：

是的，您必须从父级中删除：

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

【讨论】：

【解决方案12】：

您可以使用以下语法：node.parentNode

例如：

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

【讨论】：

这个问题要求按类名删除

【解决方案13】：

递归函数可能会解决您的问题，如下所示

removeAllByClassName = function (className) {
    function findToRemove() {
        var sets = document.getElementsByClassName(className);
        if (sets.length > 0) {
            sets[0].remove();
            findToRemove();
        }
    }
    findToRemove();
};
//
removeAllByClassName();

【讨论】：

哈哈避免了循环。

【解决方案14】：

这就是我在纯 JavaScript 中完成类似任务的方式。

function setup(item){
   document.querySelectorAll(".column") /* find all classes named column */
  .forEach((item) => { item /* loop  through each item */
      .addEventListener("click", (event) => { item
        /* add event listener for each item found */
          .remove(); /* remove self - changed node as needed */
      });
  });
  }

  setup();

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

【讨论】：

【解决方案15】：

const elem= document.getElementsByClassName('column')

for (let i = elem.length; 0 < i ; )
    elem[--i].remove();

或

const elem= document.getElementsByClassName('column')

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

【讨论】：

【解决方案16】：

这里的跳过元素错误（上面的代码）

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

【讨论】：

这有点复杂。为什么不使用 while 循环呢？（见我的回答）
@tocqueville 发布的问题使用了 for 循环。我只是指出如何通过对他的代码进行最小的更改来修复错误。

【解决方案17】：

你可以用一个简单的解决方案，只要改变类，HTML Collection过滤器就更新了：

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

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

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

【讨论】：

这不起作用，因为循环的数组在循环本身内部被修改。结果是最后一个元素将被跳过。