[英]Remove attribute from parent in array?
从子 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);
)}
使用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>
您的问题如下:您正在放置)}
而不是})
。
所以看看这段代码:
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>
您可以使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.