如何根据索引删除行？

Question

我想使用jQuery删除选定的行。首先，在单击“添加”按钮时，将使用“删除”按钮动态添加行。现在我要删除所选行。

我使用以下代码动态添加行：

＆＃13;

＆＃13;

$("#btnAdd").on('click', function (){  
  $('#Time tr').last().after('<tr><td><span style="font-size:14px;">Diplamo/Certificate :</span><input type="textbox" input id="addedValue12" name = "Certificate"></td><td><span style="font-size:14px;">Percentage :</span><input type="textbox" id="addedValue123" name = "CertificatePer"></td></tr>'); 		
});

＆＃13;

<input id="btnAdd" type="button" value="add" />
<table id="Time"> 
    <tr>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我在JSP页面中显示值。

＆＃13;

＆＃13;

<c:forEach var="var1" items="${empedu.empCertificate}">
  Certificate Name:<input value="${var1.certification}" name="Certificate" type="text" title="Only Text Allowed" pattern="[a-zA-Z\s'.,@:&?!()$#/\\]+" />
  Percentage: <input value="${var1.percentage}" name="CertificatePer" style="width: 100px;" type="text" max="100" />
  <input type="button" id="deleteRow" name="delete" value="delete" /><br/>
</c:forEach>

＆＃13;

＆＃13;

＆＃13;

它在屏幕上显示如下：

在这里，如果我点击第三行，我想删除第三行。我怎么能这样做？

Answer 1

$("#Time").on("click", ".delete", function(){

    $(this).closest("tr").remove();

});

假设delete是删除button的类。我使用.on作为行，因此删除按钮是动态添加的。

这是从点击的删除按钮中选择最接近的tr，并将其删除。

Working Fiddle

Answer 2

1st： ID必须是唯一的，所以不要将id用于多个元素。请使用class

第二次，当你追加jQuery event delegation所需的行...

$('#Time').on('click' , '.delete' , function(){  
    // change .delete_btn with your delete btn class
    $(this).closest('tr').remove();
});