Как удалить родительский элемент с помощью jQuery

Question

Как удалить родительский элемент с помощью jQuery

у меня есть некоторые теги элементов списка в моем jsp. Каждый элемент списка имеет некоторые элементы внутри, в том числе ссылку (тег"a") под названием delete. Все, что я хочу, это удалить весь элемент списка, когда я нажимаю на ссылку.

вот структура моего кода:

$("a").click(function(event) {

  event.preventDefault();

  $(this).parent('.li').remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="191" class="li">

  <div class="text">Some text</div>

  <h4><a href="URL">Text</a></h4>

  <div class="details">

    <img src="URL_image.jpg">

    <span class="author">Some info</span>

    <div class="info"> Text

      <div class="msg-modification" display="inline" align="right">

        <a name="delete" id="191" href="#">Delete</a>

      </div>

    </div>

  </div>

</li>

но это не сработает. Я новичок в jQuery, поэтому я пробовал некоторые вещи, как например:

$(this).remove();

это работает, он удаляет ссылки при нажатый.

$("#221").remove();

это работает, он удаляет указанный элемент списка, но это не "динамический".

может кто-нибудь дать мне совет?

572 5

jQuery javascript parent

5 ответов:

Comments

Ничего не найдено.

ThiefMaster · Accepted Answer · 2011-07-11 12:14:25

просто использовать .closest() способ: $(this).closest('.li').remove();
Он начинается с текущего элемента, а затем поднимается вверх по цепочке в поисках соответствующего элемента и останавливается, как только он нашел его.

.parent() доступ только к прямые родитель элемента, т. е. div.msg-modification не соответствует .li. Поэтому он никогда не достигает элемента, который вы ищете.

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

еще одна важная вещь:

никогда использовать один и тот же идентификатор для нескольких элементов. Это не допускается и вызывает очень трудные для отладки проблемы. Уберите id="191" из ссылки и, если вам нужно получить доступ к идентификатору в обработчике щелчка, используйте $(this).closest('.li').attr('id'). На самом деле это было бы еще чище, если бы вы использовали data-id="123" а то .data('id') вместо .attr('id') чтобы получить к нему доступ (поэтому Ваш идентификатор элемента не должен напоминать какой-либо идентификатор (база данных?) строка имеет)

dav · Accepted Answer · 2013-10-29 15:58:59

как насчет использования развернуть()
<div class="parent">
<p class="child">
</p>
</div>
после использования - $(".child").unwrap() - это будет;
<p class="child">
</p>

josemota · Accepted Answer · 2011-07-11 11:54:23

использовать parents() вместо parent():
$("a").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
});

Andrea_dev · Accepted Answer · 2017-07-10 13:00:30

удалить родителя:

$(document).on("click", ".remove", function() {
       $(this).parent().remove(); 
});

удалить все родители:

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});

Itisha-systematix · Accepted Answer · 2016-11-29 12:03:14

$('#' + catId).parent().remove('.subcatBtns');

0

2016-11-29 12:03:14