ボタン上の行を削除する

Question

ボタンをクリックしてクリックした行を削除しようとしました。

"追加"ボタンがうまくいきました。

HTML：

<table id="mytable" width="250px" border="0" cellspacing="0" cellpadding="0" style="text-align:center;> 
    <thead> 
    <tr class="product"> 
    <th style="text-align:center;"><strong>Item</strong></th> 
    <th style="text-align:center;"><strong>Qty.</strong></th> 
    <th style="text-align:center;"><strong>Remarks</strong></th> 
    </tr> 
    </thead> 
    <tr name="product" class="product"> 
    <td width="100px"><input type="text" width="100px" name="product" id="product" /></td> 
    <td width="5px"><input type="text" width="5px" size="1" maxlength="2" name="qty" id="qty" /></td> 
    <td width="100px"><input type="text" width="100px" height="14px" name="remarks" id="remarks" /></td> 
    <td><input type="submit" name="add" id="add" value="+" /></td> 
    <td><input type="submit" name="subtract" id="subtract" value="-" /></td> 
    </tr> 
    </table> 

私が使用しているもの：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#add").click(function() { 
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); 
$('#mytable tbody>tr:last #product').val(''); 
    $('#mytable tbody>tr:last #qty').val(''); 
     $('#mytable tbody>tr:last #remarks').val(''); 
      $('#mytable tbody>tr:last #add').val('+'); 
return false; 
    }); 
}); 

を誰が助けてもらえますか？

Answer 1

ページ上で同じIDを複数回使用することはできません。 したがって、各行にその行を削除するボタンがある場合は、おそらく要素のターゲティングにクラス名を使用します。 は、このように私はこのようなクラスに切り替えることをお勧め：その後、

<td><input type="submit" name="subtract" class="subtract" value="-" /></td> 

JSで

$("input.subtract").click(function() { 
$(this).closest("tr").remove();  
}); 

また、あなたは複数の行を持っている場合は、重複したIDの

を持つことになりますので、ご使用の追加ボタンを修正する必要があり

Answer 2

$("#subtract").click(function(e){ 
    $(this).closest(".product").remove(); 
    e.preventDefault(); 
}); 

ドミノに複数のコピーがあり、重複していると思われるので、減算と追加にはidの代わりにクラスを使用することをおすすめしますID。 Mattのコードと同様に

Answer 3

が、これがまた動作します：

$("input.subtract").click(function() { 
$(this).parents("tr").remove();  
}); 

一方が他方よりも優れている場合、私は知らないが、私はこのコードが動作していることを確認することができます。