div id 上的 javascript 单击关闭父 div 和子 div 元素？

Question

我有一个像这样的消息 div 类:

<div class="message_box_prompt">
    <div class="boxclose" id="boxclose"  onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div>
    This is a message
</div>;

如果我的用户点击我的 div boxclose这将关闭消息框 message_box_prompt并且还删除了 div boxclose .

onclick="this.parentNode.parentNode.removeChild(this.parentNode);

我的问题是我的 div 类出现不止一次 message_box_prompt立即显示在页面上:

第 1 次

<div class="message_box_prompt">
    <div class="boxclose" id="boxclose"  onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div>
    This is a message
</div>;

第 2 次

<div class="message_box_prompt">
    <div class="boxclose" id="boxclose"  onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div>
    This is a message
</div>;

第 3 次

<div class="message_box_prompt">
    <div class="boxclose" id="boxclose"  onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div>
    This is a message
</div>;

我只希望用户点击关闭的 div。我不希望它关闭其他任何一个，而是现在如果我的用户点击一个 message_box_prompt div 关闭它，它们都关闭。

有人可以告诉我一个更好的方法，这样我就可以让它做我想做的事吗？谢谢

Answer 1

如果使用 JQuery这可能会有所帮助

父级:https://api.jquery.com/parent/ (如果你需要的话)

隐藏:http://api.jquery.com/hide/

我会建议，就像评论一样，给每个 child 唯一的 ID，这样下一个代码就很容易使用。

$("#uniqueID").hide();

或者纯 Javascript

document.getElementById('uniqueID').style.display = 'none';