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/

我建議，就像評論一樣，給每個孩子提供唯一的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();        
});