按类名移除元素？

我有下面的代码来查找具有类名的元素:

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


}

我只是不知道怎么去除它们... ..。我需要提到家长什么的吗？处理这件事的最好方法是什么？

@ Karim 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 选项。

367377 次浏览
小开

是的，你必须从父母那里移除:

cur_columns[i].parentNode.removeChild(cur_columns[i]);
小开
最佳答案

使用 jQuery (我认为在这种情况下您确实可以使用它) ，您可以这样做:

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

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

element.parentNode.removeChild(element);
小开

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

例如:

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

Brett-你知道从 IE 5.5到8的 getElementyByClassName支持是 根据离奇莫德的说法吗？.如果你关心跨浏览器兼容性，你最好遵循这种模式:

  • 通过 ID 获取容器元素。
  • 通过标记名获取所需的子元素。
  • 遍历子级，测试是否匹配 className 属性。
  • 就像其他人说的那样。

举个简单的例子:

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

试试这里。

小开

如果你不喜欢使用 JQuery:

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

这里跳过的元素有 bug (上面的代码)

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

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

小开

在纯粹的 Javascript 中，如果没有 jQuery 或 ES6，您可以:

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


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

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

小开

如果您想删除动态添加的元素，请尝试这样做:

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

我更喜欢使用 forEach而不是 for/while循环。为了使用它，需要首先将 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();
小开 
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();
小开

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

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

就一句

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

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

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

这就是我如何在 PureJavaScript 中完成类似任务的方法。

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>


提交答案