Удалить строку на кнопке Нажмите

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

Вы не можете использовать один и тот же идентификатор более одного раза на странице. Таким образом, если в каждой строке есть кнопка для удаления этой строки, вы, вероятно, захотите использовать имя класса для таргетинга на элемент. Таким образом, я предлагаю переключиться на классы так:

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

затем в JS

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

Кроме того, необходимо исправить кнопку добавить, так как если у вас есть более одной строки вы будете иметь дубликат удостоверения личности

Answer 2

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

Я бы также рекомендовал использовать класс вместо id для вычитания и добавления, так как у вас будет несколько копий в dom, и считается, что у вас неправильные манеры иметь дубликат Идентификаторы.

Answer 3

Подобный код Мэтта, это также будет работать:

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

Я не знаю, если один лучше, чем другие, но я могу подтвердить, что этот код работает.