getElementById из элемента-предка для удаления дочернего класса

Question

Я хочу использовать родительский элемент с getElementById.

Например: я хочу использовать идентификатор предка "test" для удаления класса "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

Делай, как указал Райан Уилсон, или простой однострочный:

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 2

Расширяя другие предоставленные ответы, кажется, что вы ищете 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 .

Answer 3

Вы можете сделать это:

//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);