Javascript 是否按类名删除元素？

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

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

}

//按元素的类名获取元素
var cur_columns=document.getElementsByClassName（'column'）；
//现在移除它们
对于（变量i=0；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]);
    }
}

var col_wrapper=document.getElementById（“columns”）.getElementsByTagName（“div”）；
var len=col_.length；
警报（len）；
对于（变量i=0；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选项。

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

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

使用jQuery（我认为在本例中您确实可以使用jQuery），您可以这样做：

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

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

element.parentNode.removeChild(element);

---

您可以使用以下语法：

node.parentNode

例如：

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

---

Brett-您是否知道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 cells=document.getElementById（“myTable”）.getElementsByTagName（“td”）；
var len=cells.length；
对于（变量i=0；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]);
}

var col_wrapper=document.getElementById（“columns”）.getElementsByTagName（“div”）；
var elementsToRemove=[]；
对于（变量i=0；i

问题是我的错；从生成的元素数组中删除元素时，长度会发生变化，因此每次迭代都会跳过一个元素。解决方案是在临时数组中存储对每个元素的引用，然后在这些元素上循环，从DOM中删除每个元素

---

如果您不想使用JQuery：

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

---

此代码中的跳过元素错误（来自上面的代码）

---

您可以使用一个简单的解决方案，只需更改类，HTML集合过滤器就会更新：

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

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

---

参考：

在纯香草Javascript中，不使用jQuery或ES6，您可以：

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

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

---

使用ES6您可以执行以下操作：

constremoveelements=（elms）=>elms.forEach（el=>el.remove（））；
//使用类似于：
removeElements（document.querySelectorAll（“.remove”）
删除我
留着我

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

document.body.addEventListener（'domsubtremodified'，函数（事件）{
const elements=document.getElementsByClassName（'your-class-name'）；
而（elements.length>0）元素[0]。删除（）；
});
我更喜欢在循环时使用
forEach
而不是
for
/
。要使用，必须先将
HTMLCollection
转换为
Array
：

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

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

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

递归函数可能会像下面这样解决您的问题

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

它非常简单，使用ES6扩展运算符due document.getElementByClassName返回一个HTML集合

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

一行

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

例如，您可以在此页面中删除userinfo

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

这就是我用纯JavaScript完成类似任务的方式


功能设置（项目）{
document.querySelectorAll（“.column”）/*查找名为column的所有类*/
.forEach（（项）=>{item/*循环遍历每个项*/
.addEventListener（“单击”，（事件）=>{item
/*为找到的每个项目添加事件侦听器*/
.remove（）；/*根据需要删除自更改的节点*/
});
});
}
设置（）

考克斯1
罩2
cows3
牛仔4
老实说，最好的方法就是使用jQuery。我真的不明白为什么会有人想用手操纵DOM了。我不知道哈哈。。。。我只是觉得了解框架会让我觉得很肮脏&不知道如何实际使用vanillajs。因为我不是一个喜欢JS的人，所以我尝试&在使用vanilla JS时只使用它编写代码，这样我就不会忘记正确的事情。究竟谁会想成为一个知识渊博、全面发展的开发人员。荒谬！当然，这是一种很好的方法，但仅仅因为您正在使用jQuery，并不意味着您必须放弃了解它是如何工作的或底层DOM提供了什么。如果你愿意的话，你可能会修好你的车（DOM），但是你的技工（jQuery团队）可能在这方面更有经验。@Lior：是的，我的技工不需要帮我转动钥匙或摇下车窗；o） +0.75表示使用jQuery，+0.25表示还提供了非jQuery解决方案：p+0.01表示使用jQuery，+0.99表示还提供了非jQuery解决方案：pThanks表示感谢-虽然这不是一个大问题，因为它是针对管理部分的，所以实际上只有一个人会使用它。。。。但我还是会考虑你的意见。@Brett-无论如何都要做！这会占用你几分钟的时间，你会在办公室里得到额外的惊喜：）好的，我试过这个。。。据报道
const elem= document.getElementsByClassName('column')

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


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

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

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