javascript на div id щелкните закрыть родительский 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); 

Моя проблема у меня есть более чем одно вхождение моего сНу класса message_box_prompt показывает на странице сразу:

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

Происшествие 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>; 

Я хочу только, чтобы пользователь нажимал кнопку, чтобы закрыть. Я не хочу, чтобы он закрывал кого-либо из других, вместо этого на данный момент, если мой пользователь нажмет на один message_box_prompt div, чтобы закрыть его, все они закрываются. ?

Может кто-то показать мне лучший способ сделать это, так что я могу сделать это делать то, что я хочу, спасибо

Answer 1

Как об этом:

<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 2

При использовании JQuery это может выручить

родитель: https://api.jquery.com/parent/ (если вам это нужно)

Скрыть: http://api.jquery.com/hide/

Я бы предложил, точно так же, как и комментарий, предоставить каждому ребенку уникальный идентификатор, а это сделает следующий код таким простым в использовании.

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

Или чисто Javascript

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

Answer 3

Ваш HTML имеет неверный формат, у вас есть резервный

</div>'; 

и по какой-то причине «; на том конце его. Вы также повторяете один и тот же идентификатор, но это не является частью проблемы, потому что вы используете это ключевое слово. Я не знаю, почему у вас возникли проблемы, когда они все закрытия, кажется, работает нормально в 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 4

Использование Jquery:.

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