按类名删除元素?

时间:2011-01-23 22:47:16

标签: javascript removeclass

我有以下代码来查找带有类名的元素:

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

17 个答案:

答案 0 :(得分:145)

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

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

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

element.parentNode.removeChild(element);

答案 1 :(得分:135)

如果您不想使用JQuery:

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

答案 2 :(得分:22)

使用 ES6 ,您可以这样做:

<img src= />
const removeElements = (elms) => elms.forEach(el => el.remove());

// Use like:
removeElements( document.querySelectorAll(".remove") );

答案 3 :(得分:14)

如果没有jQuery,你可以这样做:

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

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

答案 4 :(得分:10)

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.

答案 5 :(得分:9)

一行

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

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

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

答案 6 :(得分:6)

这对我有用

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

答案 7 :(得分:3)

我更喜欢使用forEach而不是for / while循环。为了使用它,首先将HTMLCollection转换为Array

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

注意,它不是最有效的方式。对我来说更优雅。

答案 8 :(得分:1)

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

例如:

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

答案 9 :(得分:1)

是的,你必须从父母那里删除:

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

答案 10 :(得分:1)

使用ES6传播运算符,由于document.getElementByClassName返回HTML集合,因此非常简单,单线。

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

答案 11 :(得分: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>

答案 12 :(得分:0)

如果您要删除动态添加的元素,请尝试以下操作:

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

答案 13 :(得分:0)

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

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

答案 14 :(得分:0)

const elem= document.getElementsByClassName('column')

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

OR

const elem= document.getElementsByClassName('column')

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

答案 15 :(得分:-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]);
   }
}

答案 16 :(得分:-2)

您可以使用简单的解决方案,只需更改类,即可更新HTML集合过滤器:

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