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

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/