Home/ Questions/Q 217339
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T18:38:53+00:00

I am making a table in which you can add aditional rows. When you

  • 0

I am making a table in which you can add aditional rows. When you add a row you can either save it or cancel it, by clicking cancel the row will be removed. It works with one row but when I create like six of them and click cancel the selected row wont be removed but the last row will. Here my Code so far. Does anyone know what I’m doing wrong? 

<head>
  <script src="../jquery.js" type="text/javascript"></script>

  <script type="text/javascript">
  $(document).ready(function() {
  $(".edit").click(function() {
    var id = $(this).attr("id");
    alert("edit "+id);
  });
  $(".delete").click(function() {
    var id = $(this).attr("id");
    alert("delete "+id);
  });
  $("#newbutton").click(function() {
  var randomnumber=Math.floor(Math.random()*100);
    $("tr:last").after("<tr id="+randomnumber+"><td><form><input style='width: 80%'></form></td><td class=ok>OK</td><td id="+randomnumber+" class=cancel>Cancel</td></tr>").ready(function() {
      $("tr td .cancel").click(function() {
        $(this).remove();
      });
      $(".ok").click(function() {
        alert("OK!");
      });
    });
  })
}); 
  </script>
</head>
<table border=1 id=table>
<tr><th>Name</th></tr>
<tr><td>Bombai</td><td id=1 class=edit>edit</td><td id=1 class=delete>delete</td></tr> 
<tr><td>London</td><td id=2 class=edit>edit</td><td id=2 class=delete>delete</td></tr> 
<tr><td>Rom</td><td id=3 class=edit>edit</td><td id=3 class=delete>delete</td></tr> 
</table><label id=newbutton>New Place</label>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since you are dynamically adding rows to the DOM I’d suggest you use the live function:

    $("tr td .cancel").live("click", function(){
  $(this).parent("tr:first").remove()
})
    • 0