javascript on div id click close parent div and child div element?

Question

I have a message div class like so:

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

If my user clicks my div boxclose this closes the message box message_box_prompt and also removes the div boxclose .

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

My problem is I have more than one occurrence of my div class message_box_prompt showing on the page at once:

Occurrence 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>;

Occurrence 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>;

Occurrence 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>;

I only want the div the user clicks on to close. I don't want it to close any of the others, instead at the moment if my user clicks on one message_box_prompt div to close it they all close.

Can someone show me a better way of doing this so I can make it do what I want?Thanks

Answer 1

If using JQuery this may help out

Parent : https://api.jquery.com/parent/ (if you need it)

Hide : http://api.jquery.com/hide/

I would suggest, just like the comment, give each child unique Id's, then that would make this next code so easy to use.

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

Or pure Javascript

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

Answer 2

Your HTML is malformed, you have a redundant

</div>'; 

and for some reason a '; at then end of it. You are also repeating the same ID, but that's not part of the problem, because you are using the this keyword. I do not know why you are having a problem where they are all closing, seems to be working fine in the jsfiddle I put it in.

<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

How about this:

<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

Using Jquery:

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