从数组中的父项中删除属性?
Remove attribute from parent in array?
从子 div 中删除数据工作正常,但是如何从 forEach 中的数组中的父 div 中删除数据?
<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);
)}
您的问题如下:您输入的是 )}
而不是 })
。
所以看这段代码:
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>
使用document.querySelectorAll()
找到.parent
个节点,并迭代NodeList.forEach()
。从 parent 中删除属性。找到 parent 的所有具有 [data-child]
属性的 children,并从中删除该属性。
本例中的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>
另一种选择是分别处理 parent 和 children。
注意:在这个例子中我使用dataset
property来处理数据集属性。
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>
您可以使用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>
从子 div 中删除数据工作正常,但是如何从 forEach 中的数组中的父 div 中删除数据?
<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);
)}
您的问题如下:您输入的是 )}
而不是 })
。
所以看这段代码:
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>
使用document.querySelectorAll()
找到.parent
个节点,并迭代NodeList.forEach()
。从 parent 中删除属性。找到 parent 的所有具有 [data-child]
属性的 children,并从中删除该属性。
本例中的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>
另一种选择是分别处理 parent 和 children。
注意:在这个例子中我使用dataset
property来处理数据集属性。
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>
您可以使用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>