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/

我建议，就像评论一样，给每个孩子提供唯一的ID，然后这将使下一个代码变得如此易于使用。

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

或纯粹的Javascript

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

Answer 2

您的HTML格式错误，您有多余的

</div>';

由于某种原因';在它结束时。您也在重复相同的ID，但这不是问题的一部分，因为您使用的是this关键字。我不知道为什么你在他们都关闭的时候遇到问题，似乎在我把它放入的jsfiddle中工作得很好。

<div class="message_box_prompt">
    <div 
        class="boxclose"
        onclick="this.parentNode.remove();"
    >&#10006;</div>
    <p>Message 1</p>
</div>
<div class="message_box_prompt">
    <div 
        class="boxclose"
        onclick="this.parentNode.remove();"
    >&#10006;</div>
    <p>Message 2</p>
</div>
<div class="message_box_prompt">
    <div 
        class="boxclose"
        onclick="this.parentNode.remove();"
    >&#10006;</div>
    <p>Message 3</p>
</div>

Answer 3

这个怎么样：

<div class="message_box_prompt">

<div class="boxclose" id="boxclose" onclick="this.style.visibility='hidden'">&#10006;This is a message</div>

<div class="boxclose" id="boxclose" onclick="this.style.visibility='hidden'">&#10006;This is a message</div>

<div class="boxclose" id="boxclose" onclick="this.style.visibility='hidden'">&#10006;This is a message</div>

</div>

Answer 4

使用Jquery：

$(".boxclose").on("click",function(){
    $(this).parent().hide(0)
    $(this).remove();        
});

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

4 个答案: