[英]javascript on div id click close parent div and child div element?
I have a message div class like so: 我有一个消息div类,如下所示:
<div class="message_box_prompt">
<div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">✖</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
. 如果我的用户单击我的div
boxclose
这将关闭消息框message_box_prompt
并删除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: 我的问题是我在页面上同时显示了多次出现的div类
message_box_prompt
:
Occurrence 1 发生1
<div class="message_box_prompt">
<div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">✖</div>
This is a message
</div>;
Occurrence 2 发生2
<div class="message_box_prompt">
<div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">✖</div>
This is a message
</div>;
Occurrence 3 发生3
<div class="message_box_prompt">
<div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">✖</div>
This is a message
</div>;
I only want the div the user clicks on to close. 我只希望用户点击的div关闭。 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. 我不希望它关闭任何其他人,相反,如果我的用户点击一个
message_box_prompt
div关闭它,他们都关闭。
Can someone show me a better way of doing this so I can make it do what I want?Thanks 有人能告诉我一个更好的方法,这样我可以做到我想要的吗?谢谢
If using JQuery this may help out 如果使用JQuery,这可能会有所帮助
Parent : https://api.jquery.com/parent/ (if you need it) 家长 : https : //api.jquery.com/parent/ (如果您需要)
Hide : http://api.jquery.com/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. 我建议,就像评论一样,给每个孩子提供唯一的ID,然后这将使下一个代码变得如此容易使用。
$("#uniqueID").hide();
Or pure Javascript 或者纯粹的Javascript
document.getElementById('uniqueID').style.display = 'none';
Your HTML is malformed, you have a redundant 你的HTML格式不正确,你有多余的
</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.
您也在重复相同的ID,但这不是问题的一部分,因为您使用的是this关键字。 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.
我不知道为什么你在他们都关闭时遇到问题,似乎在我把它放进去的jsfiddle中工作得很好。
<div class="message_box_prompt">
<div
class="boxclose"
onclick="this.parentNode.remove();"
>✖</div>
<p>Message 1</p>
</div>
<div class="message_box_prompt">
<div
class="boxclose"
onclick="this.parentNode.remove();"
>✖</div>
<p>Message 2</p>
</div>
<div class="message_box_prompt">
<div
class="boxclose"
onclick="this.parentNode.remove();"
>✖</div>
<p>Message 3</p>
</div>
How about this: 这个怎么样:
<div class="message_box_prompt">
<div class="boxclose" id="boxclose" onclick="this.style.visibility='hidden'">✖This is a message</div>
<div class="boxclose" id="boxclose" onclick="this.style.visibility='hidden'">✖This is a message</div>
<div class="boxclose" id="boxclose" onclick="this.style.visibility='hidden'">✖This is a message</div>
</div>
Using Jquery: 使用Jquery:
$(".boxclose").on("click",function(){
$(this).parent().hide(0)
$(this).remove();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.