jQueryで親divを削除しなければならない

Question

"input-group"のクラスを持つdivをすべて削除する必要があります。私はjQueryでこれを行う必要があります。私はjQueryを試しましたが、divは削除していません。ここで

は私が私のコードで持っているかのエラーお知らせください

$(document).ready(function() { 
 
    $(".wrapper").on('click', '.rmvBtn', function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control" name="field_name[]" value="" /> 
 
    <span class="input-group-addon"> 
 
     <a href="#" class="rmvBtn" title="Remove field""> 
 
     <span class="glyphicon glyphicon-minus"></span> 
 
     </a> 
 
    </span> 
 
    </div> 
 
</div>

、私のコードですか？前もって感謝します。

Answer 1

を試してみてください。

$(document).ready(function(){ 

    $(".wrapper").on('click', '.rmvBtn', function(e){ 
      e.preventDefault(); 
      $(this).closest('div.input-group').remove(); 
      x--; 
    }); 

}); 

$.closestは我々が試合を得るまでDOMツリー内のその先祖を通って上に横断するためです。

あなたのコードでは、 rmvBtnは、<span>タグの内側です。したがって$(this).parent('div')は、$.parent()がDOMツリー内で1つ上のレベルまでしかトラバースしないため、何も返しません。

Answer 2

あなたは、コードの下に試してみてくださいすることができparents()代わりparent()

$(this).parents('.input-group').remove(); 

Answer 3

parentsの代わりにclosestを使用しても問題ありません。
HTMLが間違っています。aタグには、最後の属性に""という2つのタグがあります。

$(function() { 
 
    $(".wrapper").on('click', '.rmvBtn', function(e) { 
 
     e.preventDefault(); 
 
     $(this).closest("div").remove(); 
 
    }); 
 
});

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

 
<div class="wrapper"> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control" name="field_name[]" value="" /> 
 
    <span class="input-group-addon"> 
 
     <a href="#" class="rmvBtn" title="Remove field"> 
 
     <span class="glyphicon glyphicon-minus">btn</span> 
 
     </a> 
 
    </span> 
 
    </div> 
 
</div>

Answer 4

指定されたセレクターで最も近い要素を見つけてclosestを使用してください。最も近い要素は、現在の要素からバブリングすることによって検出されます。あなたのHTML

$(this).closest('div.input-group').remove();

$(document).ready(function() { 
 
    $(".wrapper").on('click', '.rmvBtn', function(e) { 
 
    e.preventDefault(); 
 
    $(this).closest('div.input-group').remove(); 
 
    // x--; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control" name="field_name[]" value="" /> 
 
    <span class="input-group-addon"> 
 
     <a href="#" class="rmvBtn" title="Remove field""> 
 
     <span class="glyphicon glyphicon-minus">remove</span> 
 
     </a> 
 
    </span> 
 
    </div> 
 
</div>