Question

如何使用javascript关闭警报消息父div？

问题是父div正在关闭，但我需要关闭父div。

这是我的代码：

$(".msg-error .btn-close").click(function(){$(this).parent().hide();});

.msg-error {
    background:#ff0000;
    color:#fff;
    padding:10px;
    margin-bottom:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="mainalert">

<div class="msg-error">
    <div class"container">
    First error message <a class="btn-close">Close</a>
    </div>
</div>

<div class="msg-error">
    <div class"container">
    Second error message <a class="btn-close">Close</a>
    </div>
</div>

</div>

Answer 1

您可以使用.closest()指定您希望使用选择器实现的最接近的父级。

$(".msg-error .btn-close").click(function() {
  $(this).closest('.msg-error').hide();
});

使用此功能，您甚至可以更改HTML结构，而无需编辑JavaScript代码来处理多级.parent()调用，只要您继续为选择器使用相同的CSS类。

FIDDLE： http://jsfiddle.net/8b7zt1g7/5/

Answer 2

$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});

http://jsfiddle.net/8b7zt1g7/4/

或者，小小的鸽友：

$(".msg-error .btn-close").click(function(){$(this).closest('.msg-error').hide();});

Answer 3

您可以将.parent()个来电链接起来。尝试：

$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});

Answer 4

你可以尝试这种方式，通过搜索那个主要的父div

你可以使用closest()或parents()，第一个选项将返回第一个匹配，秒将返回所有匹配，您的选择

$(".msg-error .btn-close").click(function() {
    $(this).parents(".msg-error").hide();
});

或去父母两次

$(".msg-error .btn-close").click(function() {
    $(this).parent().parent().hide();
});

Answer 5

删除没有jquery的父div

<div class="msg-error">
    <div class"container">
    Second error message <a class="btn-close" onclick='Close()'>Close</a>
    </div>
</div>
<script>
function Close(){
document.getElementsByClassName('msg-error').innerHtml='';
}
<script>

如何使用javascript关闭警报消息div？

5 个答案: