Как закрыть оповещение сообщения div с помощью javascript?

97
7

Как закрыть предупреждающее сообщение parent div с помощью javascript?

Проблема заключается в закрытии родительского 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>

спросил(а) 2021-01-28T01:15:46+03:00 3 месяца, 1 неделя назад
1
Решение
77

Вы можете использовать .closest() чтобы указать ближайшего родителя, которого хотите достичь, с помощью селектора.

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

С помощью этой функции вы даже можете изменить свою структуру HTML, не редактируя свой код JavaScript, чтобы иметь дело с несколькими уровнями .parent(), при условии, что вы продолжите использовать тот же класс CSS для селектора.

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

ответил(а) 2021-01-28T01:15:46+03:00 3 месяца, 1 неделя назад
62

$(".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();});

ответил(а) 2021-01-28T01:15:46+03:00 3 месяца, 1 неделя назад
44

Вы можете .parent() вызовы .parent() вместе. Пытаться:

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

ответил(а) 2021-01-28T01:15:46+03:00 3 месяца, 1 неделя назад
45

Удалить родительский div без jquery

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

ответил(а) 2021-01-28T01:15:46+03:00 3 месяца, 1 неделя назад
45

вы можете попробовать таким образом, выполнив поиск этого основного родительского div

вы можете использовать closest() или parents(), первый вариант вернет первое совпадение, а секунды вернут все совпадения, ваш выбор

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

или дважды переходить к родительскому

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

ответил(а) 2021-01-28T01:15:46+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема