親divを.remove（）で削除します。

Question

私は、押したときに<button>タグの親divを削除するためにjQueryを使用しようとしています。

<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">ブロックを削除する必要がありますが、何が起こるように思わない：私は、このHTMLコードを持っています。

Answer 1

$(this).parents('.li').remove();のセレクタは、選択しようとしている親を表します。これは$(this).parents('#1a').remove();となりますが、親divのIDが1aであるため、'.li'から'#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(); 

またはむしろあなたのDIVにliクラスを割り当てる：

$(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")が、そのクラスを使用してくださいより<div class="li" id="1a">

Answer 3

.closest（）メソッドを使用するだけです。$（this）.closest（ '。li'）。remove（）; これは現在の要素から始まり、一致する要素を探してチェーンを登り、要素が見つかるとすぐに停止します。

.parent（）は要素の直接的な親要素、つまり.liにマッチしないdiv.msg-modificationにのみアクセスします。だからあなたが探している要素には決して到達しません。

.closest（）（現在の要素をチェックしてからチェーンを登る）以外の解決策は、.parents（）を使用しますが、これは警告が見つかるとすぐに停止しないという警告があります（現在の要素はチェックせず、親要素のみをチェックします）。あなたの場合、それは本当に重要ではありませんが、あなたがやろうとしていることに対して.closest（）が最も適切な方法です。