Как удалить родительский элемент с помощью 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>

Ответ 1

Просто используйте метод .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') для доступа к нему (так что ваш идентификатор элемента не должен напоминать любой идентификатор строки (базы данных?))

Ответ 2

Используйте parents() вместо parent():

$("a").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
});

Ответ 3

как насчет использования развернуть()

<div class="parent">
<p class="child">
</p>
</div>

после использования - $(".child").unwrap() - это будет:

<p class="child">
</p>

Ответ 4

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

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

Удалить всех родителей:

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

Ответ 5

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

Ответ 6

Вы также можете использовать это:

$(this)[0].parentNode.remove();