通过类名删除元素？
我有下面的代码来find他们的类名称的元素：
// 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选项。
使用jQuery（你真的可以在这种情况下使用，我想），你可以这样做：
$('.column').remove();
否则，您将需要使用每个元素的父项来移除它：
element.parentNode.removeChild(element);
如果您不想使用JQuery：
function removeElementsByClass(className){ var elements = document.getElementsByClassName(className); while(elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } }
Brett – 你知道从IE 5.5到8的getElementyByClassName支持不是根据quirksmode吗？ 如果您关心跨浏览器兼容性，那么您最好遵循以下模式：
- 通过ID获取容器元素。
- 通过标签名称获取所需的子元素。
- 迭代孩子，testing匹配的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]); }
问题是我的错; 当从结果元素数组中移除元素时，长度会发生变化，所以每次迭代时都会跳过一个元素。 解决scheme是将每个元素的引用存储在临时数组中，然后循环遍历这些元素，从DOM中删除每个元素。
在这里尝试。
使用ES6你可以这样做：
const removeElements = (elms) => Array.from(elms).forEach(el => el.remove()); // Use like: removeElements( document.querySelectorAll(".remove") );
<p class="remove">REMOVE ME</p> <p>KEEP ME</p> <p class="remove">REMOVE ME</p>
没有jQuery，你可以这样做：
const elements = document.getElementsByClassName("my-class"); while (elements.length > 0) elements[0].remove();
是的，你必须从父母中删除：
cur_columns[i].parentNode.removeChild(cur_columns[i]);
如果你想删除dynamic添加的元素，请尝试以下操作：
document.body.addEventListener('DOMSubtreeModified', function(event) { const elements = document.getElementsByClassName('your-class-name'); while (elements.length > 0) elements[0].remove(); });
你可以使用这个语法： node.parentNode
例如：
someNode = document.getElementById("someId"); someNode.parentNode.removeChild(someNode);
你应该尝试jQuery，select元素并编辑它们会更容易。
用jQuery你的代码应该看起来像这样：
$( document ).ready( function() { // Select all elements with class name 'className' and remove them $( ".className" ).remove(); });
你可以而不是删除你可以改变CSS的显示属性为none！
// Get the element by their class name var cur_columns = document.getElementsByClassName('column'); // Now remove them cur_columns.style.display= "none";
我希望它有帮助！
在这个跳过元素错误（代码从上面）
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]); } }
您可以使用简单的解决scheme，只需更改类，HTML收集filter即可更新：
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
