Удаление родительского div через .remove();

Question

Я пытаюсь использовать jQuery для удаления родителя div тега <button> при нажатии. У меня есть этот HTML код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> 
</script> 
<script> 
    $(".remove").click(function(event) { 
     event.preventDefault(); 
     $(this).parents('.li').remove(); 
    }); 
</script> 
<div id="1a"> 
    <input class="versionid" placeholder="Version Number"><button class="add">+</button><button class="remove">X</button><br> 
    <br> 
    <textarea class="textarea" placeholder="Changes"></textarea> 
</div> 

код JQuery должен удалить весь <div id="1a"> блок, но ничего, кажется, произошло.

Answer 1

Селектор в $(this).parents('.li').remove(); относится к родительскому элементу, который вы пытаетесь выбрать. Это должно быть указано $(this).parents('#1a').remove();, обратите внимание на изменение от '.li' до '#1a', так как родительский div имеет идентификатор 1a. Вот JSFiddle:

https://jsfiddle.net/9jLsz6r2/

В качестве альтернативы, вы можете использовать $(this).parent().remove(), что может быть проще, если у вас есть несколько кнопок удалить

Answer 2

Кажется странным родителей, чтобы удалить ... так .parents('.li')не существует ,

<div class="YOU DON'T HAVE ANY CLASS" id="1a">  

Возможно http://api.jquery.com/closest/:

$(this).closest('div').remove(); 

или довольно назначая li класс в DIV:

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

как:

$(".remove").click(function(event) { 
 
    event.preventDefault(); 
 
    $(this).closest('div').remove(); 
 
});

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

 
<div class="li" id="1a"> 
 
    <input class="versionid" placeholder="Version Number"><button class="add">+</button><button class="remove">X</button><br> 
 
    <br> 
 
    <textarea class="textarea" placeholder="Changes"></textarea> 
 
</div>

Как вы можете видеть из полезных замечаний, удостоверьтесь, чтобы использовать более конкретный селектор, чем .closest("div"), возможно, как класс: .closest(".parent") или даже .closest(".li"), но чем убедитесь, что использовать этот CLASS <div class="li" id="1a">

Answer 3

Просто используйте метод .closest(): $ (this) .closest ('. Li'). Remove(); Он начинается с текущего элемента, а затем поднимается вверх по цепочке, ища подходящий элемент и останавливается, как только он ее находит.

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

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