178

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

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

4

17 回答 17

246

如果您不想使用 JQuery：

function removeElementsByClass(className){
    const elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}
于 2012-12-28T08:07:46.433 回答
232

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

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

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

element.parentNode.removeChild(element);
于 2011-01-23T22:52:09.863 回答
49

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

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

while (elements.length > 0) elements[0].remove();
于 2016-09-30T17:48:57.487 回答
47

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

于 2016-10-16T17:08:52.213 回答
25

一条线

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

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

document.querySelectorAll(".user-info").forEach(el => el.remove());
于 2020-03-31T09:07:34.550 回答
15

这对我有用

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }
于 2018-06-27T07:33:36.417 回答
10

Brett - 您是否知道根据 quirksmode不存在getElementyByClassName从 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 中删除每个元素。

在这里试试。

于 2011-01-23T22:59:11.657 回答
4

我更喜欢使用forEach过度for/while循环。为了使用它有必要先转换HTMLCollection为Array：

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

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

于 2018-02-18T15:19:53.173 回答
3

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

[...document.getElementsByClassName('dz-preview')].map(thumb => thumb.remove());
于 2020-01-08T19:33:41.017 回答
2

如果您想删除动态添加的元素，请尝试以下操作：

document.body.addEventListener('DOMSubtreeModified', function(event) {
    const elements = document.getElementsByClassName('your-class-name');
    while (elements.length > 0) elements[0].remove();
});
于 2017-05-20T19:17:51.980 回答
1

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

cur_columns[i].parentNode.removeChild(cur_columns[i]);
于 2011-01-23T22:51:19.537 回答
1

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

例如：

someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);
于 2011-01-23T22:52:53.623 回答
1

这就是我在纯 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>

于 2021-01-27T23:57:02.230 回答
1

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

removeAllByClassName = function (className) {
    function findToRemove() {
        var sets = document.getElementsByClassName(className);
        if (sets.length > 0) {
            sets[0].remove();
            findToRemove();
        }
    }
    findToRemove();
};
//
removeAllByClassName();
于 2019-03-20T11:49:33.507 回答
0 
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();
于 2019-07-27T04:32:52.760 回答
-1

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

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]);
   }
}
于 2014-02-04T16:28:58.613 回答
-3

您可以使用一个简单的解决方案，只需更改类，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

于 2014-06-25T12:45:08.033 回答