CODEWITHSUNDEEP
jquery
elhombre
elhombre

Reputation: 2949

jQuery - remove table row <tr> by clicking a <td>

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>

Upvotes: 17

Views: 73861

Answers (7)

Muhammad Waqas
Muhammad Waqas

Reputation: 561

Try the following code:

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

Upvotes: 0

J LAKSHMANAN
J LAKSHMANAN

Reputation: 1

script

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>
    $(document).ready(function () {
        var markup = "<tr><td><input type='checkbox' name='record'></td><td></td><td></td></tr>";
        $("#Add").click(function () {
            $("#tbl1").append(markup);

        });
        $("#remove").click(function () {
            $("table tbody").find('input[name="record"]').each(function () {
                if ($(this).is(":checked")) {
                    $(this).parents("tr").remove();
                }
            });
        });
    }); </script>

Upvotes: 0

J LAKSHMANAN
J LAKSHMANAN

Reputation: 1

body

Add Row

<table border="5px" cellspacing="3px" cellpadding="10px" id="tbl1">
    <thead>
        <tr>
        <td>
            Select
        </td>
        <td>
            column 2
        </td>
        <td>
            column 3
        </td>

    </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="record"></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<br />
<button id="remove">Delete Row</button>

Upvotes: -1

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

you can try do something like this,

Check this Demo js Fiddle

HTML

<table border=2>
    <tr>
        <td>jQuery</td>
        <td>mootools</td>
    </tr>
    <tr>
        <td>Dojo</td>
        <td>FUEL</td>
    </tr>
    <tr>
        <td>Raphael</td>
        <td>Rico</td>
    </tr>
    <tr>
        <td>SproutCore</td>
        <td>Lively Kernel</td>
    </tr>
</table>

jQuery :

$(function() {
   $('tr')
       .find('td')
       .append('<input type="button" value="Delete" class="del"/>')
       .parent()//traversing to 'tr' Element
       .append('<td><input type="button" value="Delete row" class="delrow" /></td>');

    $('.del').click(function() {
       $(this).parent().remove(); //Deleting TD element
    });

    $('.delrow').click(function(){
       $(this).parent().parent().remove(); //Deleting the Row (tr) Element
    });
});

Upvotes: 7

Uahmed
Uahmed

Reputation: 1845

<td><a class="delete" onclick ="delete_user($(this))">Delete</a></td>

in javascript 

    function delete_user(row)
    {
        row.closest('tr').remove();


    }

Upvotes: 12

duckyflip
duckyflip

Reputation: 16499

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()
})

Upvotes: 20

chaos
chaos

Reputation: 124297

You're not scoping your removal operation to the context of the row you're adding. Try:

$(this).find("tr td .cancel").click(...)

Will need to do the same deal with the edit button.

Upvotes: 0

Related Questions