jQueryでボタン（子）をクリックするたびに、選択した<tr>（親）divを削除するにはどうすればよいですか？

Question

HTML：

<tr> 
    <td> 
     <div class="input"> 
      <p>Room 1: </p> 
     </div> 
    </td> 
    <td> 
     <div class="revenue-input"> 
      <input type="number" min="0" id="room1rev" size="1" placeholder="0"> 
     </div> 
    </td> 
    <td> 
     <button id="btn-del-rev" class="btn-del">-</button> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div class="input"> 
      <p>Room 2: </p> 
     </div> 
    </td> 
    <td > 
     <div class="revenue-input"> 
      <input type="number" min="0" id="room2rev" size="1" placeholder="0"> 
     </div> 
    </td> 
    <td> 
     <button id="btn-del-rev" class="btn-del">-</button> 
    </td> 
</tr> 

のjQuery：

<!-- Delete Element --> 
<script> 
$(document).ready(function() { 
    $("#btn-del-rev").click(function() { 
    $(this).parent().parent().remove() 
    }); 
}); 
</script> 

＃1 BTN-デル-REV IDを持つボタンは、クリックすると、しかし、全体のtr構造（親など）を削除クリックすると次の行の同じボタンは次のtrを削除しません。

idを再利用することに問題があると私は理解していますが、一意のidと冗長なjQueryコードを作成せずに削除したいすべてのtrでボタンを動作させる方法がわかりません。

ご協力いただきましてありがとうございます。

Answer 1

IDは一意である必要があります。

を変更したり、HTML

<button class="btn-del">-</button> 

にID属性を削除し、.classファイルが.parent().parent()するのではなく、ところで代わり

$(".btn-del").click(function() { 

属性を使用し、あなたが使用する必要があります.closest()

$(this).closest('tr').remove() 

セレクタに一致する最初の要素を取得します。これは、要素自体をテストし、DOMツリーの祖先を走査します。

jQuery Closest documentation

Answer 2

IDのページで繰り返すことはできません、彼らは定義によって一意です。

はあなたがIDを使用していて、複数のボタンのためにあなたはクラス名を使用する必要があります代わりに、クラス

Answer 3

にそれを変更する必要があります。だからあなたはそのクラスにbtn-del-revを変換する方が良いです。

Answer 4

IDは一意である必要があります。したがって、IDをクラスに変更することができます。あなたは、この行を変更する必要がある唯一の親のdivを除去するために

：

$(this).parent().parent().remove() 

へ：検索は、div要素を選択しながら、

$(this).closest('tr').find('div.revenue-input').remove() 

.closest('tr')は、親の行を選択します。

スニペット：

$(document).ready(function() { 
 
    $(".btn-del-rev").click(function() { 
 
    $(this).closest('tr').find('div.revenue-input').remove() 
 
    }); 
 
});

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

 

 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
      <div class="input"> 
 
       <p>Room 1: </p> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="revenue-input"> 
 
       <input type="number" min="0" id="room1rev" size="1" placeholder="0"> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <button class="btn-del-rev btn-del">-</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div class="input"> 
 
       <p>Room 2: </p> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div class="revenue-input"> 
 
       <input type="number" min="0" id="room2rev" size="1" placeholder="0"> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <button class="btn-del-rev btn-del">-</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 5

IDクラス

<button class="btn-del-rev btn-del">-</button> 

が最も近い行に

$(document).ready(function() { 
    $(".btn-del-rev").on('click',function() { 
    $(this).closest("tr").remove(); 
    }); 
});