從數組中的父級刪除屬性？

Question

從子 div 中刪除數據工作正常，但是如何從 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);
  )}

Answer 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>

Answer 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>

Answer 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>

從數組中的父級刪除屬性？

問題描述

3 個解決方案

解決方案1
1 已采納 2021-02-02 11:02:05

解決方案2
0 2021-02-02 10:53:52

解決方案3
0 2021-02-02 11:06:20

從數組中的父級刪除屬性？

問題描述

3 個解決方案

解決方案1 1 已采納 2021-02-02 11:02:05

解決方案2 0 2021-02-02 10:53:52

解決方案3 0 2021-02-02 11:06:20

解決方案1
1 已采納 2021-02-02 11:02:05

解決方案2
0 2021-02-02 10:53:52

解決方案3
0 2021-02-02 11:06:20