我写了一个函数来删除某个类的所有元素。我尝试创建这个函数,以便我可以输入多个类,除以' |'唱。
不知何故,它是nog正常工作,一些元素是删除,有些不是...... 有人能告诉我,我做错了什么吗?
function removeElement(classNames){
var classNamesArray = classNames.split("|");
for (var i = 0; i < classNamesArray.length; i++) {
alert(classNamesArray[i]);
var elements = document.getElementsByClassName(classNamesArray[i])
for (var j = 0; j < elements.length; j++){
alert(elements[j]);
elements[j].remove();
}
}
}
&#13;
<div class="admin">test div1</div>
<div class="admin">test div2</div>
<div class="normal">test div3</div>
<div class="admin">test div4</div>
<span class="admin">test span1</span>
<div class="admin normal">test div1</div>
<div class="admin">test div2</div>
<div class="normal">test div3</div>
<div class="admin">test div4</div>
<span class="admin">test span1</span>
<br>
<button onClick="removeElement('admin|normal')">do it now!</button>
&#13;
答案 0 :(得分:2)
当你删除一个元素时,你会忘记元素数组越来越短。
将第二个FOR循环更改为从数组末尾运行,如下所示:
for (var j = elements.length; j > 0; j--){
答案 1 :(得分:1)
使用Jquery。现在会更容易。
所以,你的功能变成了:
function removeElement(classNames){
var classNamesArray = classNames.split("|");
$.each( classNamesArray , function( key, value ) {
$("."+key).remove();
});
答案 2 :(得分:1)
如何选择和删除多个类的元素
要查找一组类的所有元素,只需将querySelectorAll
方法与逗号分隔的类列表一起使用即可。此方法将返回包含所有匹配元素的nodeList
,然后您可以循环并从DOM中删除它们。
例如:
// Select all elements of class1 and/or class2 and/or class3
var elementsOfMultipleClasses = document.querySelectorAll('.class1, .class2, .class3');
// Remove all matching elements
[].forEach.call(elementsOfMultipleClasses, function(element) { element.remove(); });
如何将其变为可重复使用的功能
如果要将其转换为可重用的函数,可以使用map
和join
方法将类数组转换为多类选择器:
function removeElementsOfMultipleClasses(classesList) {
// Invalid classes list
if (!classesList || !classesList.length) return false;
// Generate a comma-separated multiple classes selector
// For example, '.class1, .class2, .class3'
var classesSelector = (classesList.map(function(value) { return '.'+value })).join(',');
// Find and remove all matching elements
[].forEach.call(document.querySelectorAll(classesSelector),
function(element) { element.remove(); }
);
}