我有以下代码来查找带有类名的元素:
// 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选项。
答案 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吗?如果您关心跨浏览器兼容性,最好遵循此模式:
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中删除每个元素。
答案 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