Блог

Главная - Вопросы по программированию - Удалить атрибут из родительского в массиве?

Удалить атрибут из родительского в массиве?

#javascript #arrays #foreach #attributes #parent

#javascript #массивы #foreach #атрибуты #родительский элемент

Вопрос:

Удаление данных из дочерних подразделений работает нормально, но как удалить данные из родительского элемента в массиве внутри forEach?

 <div class="parent" data-parent="parentdata">
   <div class="child1" data-child="child1data"></div>
   <div class="child2" data-child="child1data"></div>
   <div class="child3" data-child="child1data"></div>
</div>
<button onclick="myFunction()">Click me</button>
 
   var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  divsname.forEach(function(div){
  var clonedDiv = div.cloneNode(true);
  Array.from(clonedDiv.querySelectorAll(".parent [data-child]")).forEach((elem) =>     elem.removeAttribute("data-child"));
  //How get parent data and remove?
  
  var removedataHTML = clonedDiv.innerHTML;
  alert(removedataHTML);
  )}

Ответ №1:

Используйте document.querySelectorAll() , чтобы найти .parent узлы и выполнить итерацию NodeList.forEach() . Удалите атрибут из родительского элемента. Найдите все дочерние элементы родительского элемента с [data-child] атрибутом и удалите из них атрибут.

CSS в этом примере добавляет цвет к узлам с data-parent data-child атрибутами и . Их удаление приведет к удалению цвета.

 function myFunction() {
  document.querySelectorAll('.parent')
    .forEach(parent => {
      parent.removeAttribute("data-parent");
      parent.querySelectorAll('[data-child]')
        .forEach(child => {
          child.removeAttribute("data-child");
        });
    });
} 
 [data-parent] {
  color: gold;
}

[data-child] {
  color: purple;
} 
 <div class="parent" data-parent="parentdata">data-parent
  <div class="child1" data-child="child1data">data-child</div>
  <div class="child2" data-child="child1data">data-child</div>
  <div class="child3" data-child="child1data">data-child</div>
</div>
<button onclick="myFunction()">Click me</button>

Другой вариант — обрабатывать родителей и дочерних элементов отдельно.

Примечание: в этом примере я использую dataset свойство для обработки атрибутов набора данных.

 function myFunction() {
  document.querySelectorAll('.parent[data-parent]')
    .forEach(node => {
      delete node.dataset?.parent;
    });
    
  document.querySelectorAll('.parent [data-child]')
    .forEach(node => {
      delete node.dataset?.child;
    });
} 
 [data-parent] {
  color: gold;
}

[data-child] {
  color: purple;
} 
 <div class="parent" data-parent="parentdata">data-parent
  <div class="child1" data-child="child1data">data-child</div>
  <div class="child2" data-child="child1data">data-child</div>
  <div class="child3" data-child="child1data">data-child</div>
</div>
<button onclick="myFunction()">Click me</button>

Ответ №2:

Ваша проблема заключается в следующем: вы помещаете )} вместо }) .

Итак, посмотрите на этот код:

 function myFunction() {
            var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
            divsname.forEach(function(div){
            var clonedDiv = div.cloneNode(true);
            Array.from(clonedDiv.querySelectorAll(".parent [data-child]")).forEach((elem) => elem.removeAttribute("data-child"));
            //How get parent data and remove?
  
            var removedataHTML = clonedDiv.innerHTML;
            alert(removedataHTML);
            }) // The problem was on this line.
        } 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array iteration test</title>
</head>
<body>
    <div class="parent" data-parent="parentdata">
        <div class="child1" data-child="child1data"></div>
        <div class="child2" data-child="child1data"></div>
        <div class="child3" data-child="child1data"></div>
     </div>
     <button onclick="myFunction()">Click me</button>
</body>
</html>

Ответ №3:

Вы можете использовать elem.parentElement

 function myFunction(){
      var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
      divsname.forEach(function(div){
      var clonedDiv = div.cloneNode(true);
      Array.from(clonedDiv.querySelectorAll(".parent [data-child]")).forEach((elem) =>   {  
        elem.removeAttribute("data-child");
        if(elem.parentElement.hasAttribute("data-parent")){ //check for the attribute and remove it
          elem.parentElement.removeAttribute("data-parent")
        }
      });
      //How get parent data and remove?
      
      var removedataHTML = clonedDiv.outerHTML;
      alert(removedataHTML);


output:
    <div class="parent">
       <div class="child1"></div>
       <div class="child2"></div>
       <div class="child3"></div>
    </div>