使用javascript使父节点消失

Question

我编写了一个函数，该函数使元素的父元素消失，但它不起作用。这是代码。 HTML：

<div class="att">
<p style="display:inline-block;margin-bottom:2px;cursor:default;">Delete Parent of this element by clicking the image!</p>
<img src="xicon.png" height="16" width="auto" style="display:inline-block;margin-top:3px;cursor:pointer;" onclick="deleteParent(this.id)"/>
</div>

使用Javascript：

function deleteParent(id){
document.getElementById(id).parentNode.style.display="none";
}

为什么这段代码不起作用？提前谢谢！

Answer 1

您的元素没有id。您应该只引用元素本身而不是ID。这样它就适用于所有元素，而不必担心它们是否具有ID。

＆＃13;

＆＃13;

function deleteParent(elem){
elem.parentNode.style.display="none";
}

＆＃13;

<div class="att">
<p style="display:inline-block;margin-bottom:2px;cursor:default;">Delete Parent of this element by clicking the image!</p>
<img onclick="deleteParent(this)" src="xicon.png" height="16" width="auto" style="display:inline-block;margin-top:3px;cursor:pointer;"/>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

因为你在图像集ID中没有任何id，它会工作，看看输出

＆＃13;

＆＃13;

function deleteParent(id){
document.getElementById(id).parentNode.style.display="none";
}

＆＃13;

<div class="att">
<p id='e' style="display:inline-block;margin-bottom:2px;cursor:default;">Delete Parent of this element by clicking the image!</p>
<img id='a' src="xicon.png" height="16" width="auto" style="display:inline-block;margin-top:3px;cursor:pointer;" onclick="deleteParent(this.id)"/>
</div>

＆＃13;

＆＃13;

＆＃13;