Delete <tr> using jQuery

问题

<table class="table table-bordered table-hover tablesorter">    
   <tbody id="fieldList">    
       <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
           <td>Description</td>
           <td>Test Description</td>
           <td><a onclick="service.removeRow(field_baf1034a_d9d1_a85f_3294_0de635d39c82);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
          </td>
       </tr>
       <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
          <td>Address</td>
          <td>Test Address</td>
          <td><a onclick="service.removeRow(field_85a21c73_da7c_3814_609e_0b743c8f014f);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
      </tr>
    </tbody>
</table>

Javascript code:

var service = {
removeRow:function(id){ 
        /* alert(id) == [object HTMLTableRowElement]*/
        $("#"+id).remove();
   }
}

Console Error:

Error: Syntax error, unrecognized expression: #[object HTMLTableRowElement]

I want to delete table row, please help.

回答1:

You can simplify your code by referencing the parent tr, not directly, but starting from the child td using jQuery closest.

HTML:

    <td><a onclick="service.removeRow(this);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>

    </td>

Code:

var service = {
removeRow:function(el){ 
        $(el).closest('tr').remove();
   }
}

In this way you can avoid to hard code its id.

Demo: http://jsfiddle.net/IrvinDominin/keLnN/

回答2:

You are passing identifiers not strings.

Consequently, the horrible IE4ism that has somehow made it into HTML which causes every element with an id to create a global JS variable with the same ID is giving you the <tr> elements themselves.

When you "#"+id you convert the HTML Element object into a string, which is [object HTMLTableRowElement]

Put quotes around the IDs you are passing.

service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82')

回答3:

You need to quote the IDs when you have them in your html like that:

<table class="table table-bordered table-hover tablesorter">    
   <tbody id="fieldList">    
       <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
           <td>Description</td>
           <td>Test Description</td>
           <td><a onclick="service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
          </td>
       </tr>
       <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
          <td>Address</td>
          <td>Test Address</td>
          <td><a onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
      </tr>
    </tbody>
</table>

or better yet, don't inline your event handlers and do it all in JS:

$('#fieldList a').on('click', function (e) {
    $(this).closest('tr').remove();
});

which has the side effect of neater html:

<table class="table table-bordered table-hover tablesorter">    
   <tbody id="fieldList">    
       <tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
           <td>Description</td>
           <td>Test Description</td>
           <td><a href="#"> <i class="fa fa-delete"></i></a>
          </td>
       </tr>
       <tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
          <td>Address</td>
          <td>Test Address</td>
          <td><a href="#"> <i class="fa fa-delete"></i></a></td>
      </tr>
    </tbody>
</table>

回答4:

If you want to delete the row, where is the button, the better way is to use "this", not hardcoded the Row's IDs, because if ID is different - you need to change the function.

Set all a-tags to be:

<a onclick="service.removeRow(this);" href="javascript:void(0);">

then, the function will be:

var service = {
removeRow:function(td){ 
        $(td).closest("tr").remove();
   }
}

回答5:

change the mark up like this...

onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');

hope it solves!

回答6:

Try this:

$('"#'+id+'"').remove();

回答7:

Create <a> tags like below

    <a class="removeRow" href="javascript:void(0);">

then in Jquery

$(document).ready(function(){
$('.removeRow').click(function(){
$(this).closest('tr').remove();
});
});

回答8:

You need to remove a child from its parent node so here is a small example

<!DOCTYPE html>
<html>
<body>

<table id="table1" border="2">
<tr id="tr1" >
<td id="td1"><p id="p1">This is a paragraph.</p></td>
<td id="td1"><p id="p2">This is another paragraph.</p></td>
</tr>
</table>

<script>
var parent=document.getElementById("table1");
var child = document.getElementById("tr1"); 

child.parentNode.removeChild(child);
</script>

</body>
</html>

Actually here i have a table with a id of table1 as you can see... in script i defined a variable with the name of child ... now in last line child.parentNode.removeChild(child); child is the name of variable that we define earlier... after then parentNode will search for its parent node of child that is table and after then the removeCHILD will remove the child...

hope you understood! thanks

来源：https://stackoverflow.com/questions/21329205/delete-tr-using-jquery