Как удалить строку на основе ее индекса?

Question

Я хочу удалить выбранную строку, используя jQuery. Во-первых, нажав кнопку добавления, строки добавляются динамически с помощью кнопки удаления. Теперь я хочу удалить выбранную строку.

Я использую следующий код для добавления строк динамически:

$("#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>'); \t \t 
 
});

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

Я отображение значений на странице JSP.

<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>

Он отображается на экране, как это:

Здесь Если я нажимаю на третий ряд, я хочу удалить третью строку. Как я могу это сделать?

Answer 1

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

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

}); 

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

Это самая близкая tr нажатая кнопка удаления и удаление ее.

Working Fiddle

Answer 2

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

второй: в то время как вы добавить строки, необходимые для jQuery event delegation ...

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