CODEWITHSUNDEEP
javascriptjqueryjsp
sathish kumar
sathish kumar

Reputation: 159

How to delete a row based on its index?

I want to delete a selected row using jQuery. First, while clicking add button, rows are added dynamically with a delete button. Now I want to delete the selected row.

I am using the following code to add rows dynamically:

$("#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>'); 		
});
<input id="btnAdd" type="button" value="add" />
<table id="Time"> 
    <tr>
    </tr>
</table>

I am displaying values in a JSP page.

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

It is displayed on screen like this:

Screenshot

Here, If I click the third row, I want to delete the third row. How can I do this?

Upvotes: 3

Views: 2857

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st: Id must be unique so don't use id for more than one element .. use class instead

2nd: while you append rows you need to jQuery event delegation ... 

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

Upvotes: 2

void
void

Reputation: 36703

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

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

});

Assuming delete is the class of the delete button. I have used .on as the rows and thus delete buttons are dynamically added.

This is picking the closest tr from the clicked delete button, and removing it.

Working Fiddle

Upvotes: 3

Related Questions