Question

我想将父元素与getElementById一起使用。

例如：我想使用祖先ID“测试”来删除类“ myClass”。

HTML

<div id="test">
  <div id="test-child-one">
    ...
  </div>
  <div id="test-child-two">
    ...
  </div>
  <div id="test-child-three">
    <div class="myClass"></div>
  </div>
</div>

JavaScript

 var element = document.getElementById("test");
 element.className = element.className.replace(/\bmyClass\b/g, "");

它不起作用。请帮忙！谢谢。

Answer 1

您可以这样做：

//If you want to remove the class from all decendants
//Get all decendants with class "myClass"
const childEles = document.getElementById('test').querySelectorAll('.myClass');



//Or per David
const childEles = document.querySelectorAll('#test .myClass');

//Iterate the collection and remove "myClass" from all decendants
for(let x = 0; x < childEles.length; x++){
    childEles[x].classList.remove("myClass");
}

//If you only want to remove the first decendant
document.getElementById('test').querySelectorAll('.myClass')[0].classList.remove("myClass");



 //Or per David
 document.querySelectorAll('#test .myClass')[0].classList.remove("myClass);

Answer 2

就像瑞安·威尔逊（Ryan Wilson）所指定的那样或简单的单线：

document.getElementById("test").querySelectorAll('.myClass').forEach(function (el) { el.classList.remove("myClass"); });

或者，如果在代码和浏览器之间有转译器，则采用一种优美的方式：

removeChildrenClass = (parentId, childClass) => document.querySelectorAll(`#${parentId} .${childClass}`).forEach(el => el.classList.remove(childClass));
removeChildrenClass("test", "myClass");

Answer 3

在提供的其他答案上进行扩展，似乎您正在寻找querySelectorAll。假设您已经有一些祖先元素element，则可以使用querySelectorAll查找具有指定类的所有子项。以您的示例为基础：

使用querySelectorAll

// Example constant element IDs/classes
var parentId = "test";
var targetClass = "myClass";

// The given parent element
var element = document.getElementById(parentId);

// Iterate over all children `elem`s with the target class
element.querySelectorAll(targetClass).forEach(function (elem) {
    elem.classList.remove(targetClass);
});

这只是一个示例，演示了如何在特定元素上使用querySelectorAll来解决此类问题。请注意，querySelectorAll将匹配包含myClass的多个类（如果存在），如果要专门删除第一个此类，则可以改用querySelector。

从祖先元素中获取getElementById以删除子类

3 个答案: