How to Remove a Table Row with Jquery

What is the best way to remove a table row with jQuery?

You're right:

$('#myTableRow').remove();

This works fine if your row has an id, such as:

<tr id="myTableRow"><td>blah</td></tr>

If you don't have an id, you can use any of jQuery's plethora of selectors.

clear table jquery

Use .remove()

$("#yourtableid tr").remove();

If you want to keep the data for future use even after removing it then you can use .detach()

$("#yourtableid tr").detach();

If the rows are children of the table then you can use child selector instead of descendant selector, like

$("#yourtableid > tr").remove();

Remove Row from table using jQuery

You are passing this on the on HTML - newtest2(this).

On your function, you need to recieve the variable and use it to delete the <tr>

 function newtest2(e) {              //Add e as parameter
      $(e).parents('tr').remove();   //Use the e to delete
 }

Here is the snippet:

function newtest2(e) {  $(e).parents('tr').remove();}
function newtest() {  var name = ["Avengers", "Black Mirror", "Star Wars"];  var r = name.length;  $("#table1").empty();  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }}

#table1 {  background: gray;}
td {  border: 1px solid black;  text-align: center;  color: white;  font-weight: bold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><table id="table1">
</table>

<br><button onclick="newtest()">TEST</button>

jquery delete table row

The row is deleted but as clicking makes you follow the link, it's immediately restored when the page is refreshed.

Add return false; or event.preventDefault(); at the end of the callback to prevent the default behavior :

$(document).ready(function() {
    $("#favoriteFoodTable .deleteLink").on("click",function() {
        var tr = $(this).closest('tr');
        tr.css("background-color","#FF3700");
        tr.fadeOut(400, function(){
            tr.remove();
        });
        return false;
    });
});

Demonstration

Note that I used closest for a more reliable code : if another element comes in between, the tr will still be found.

How to delete a row in a table using jQuery?

$('table').on('click','.delete',function(){
  $(this).parents('tr').remove();
});

In your code add class="btn btn-default btn-sm delete. Adding a class delete will help you to use btn classes in other handlers also. .remove() function removes the whole html for that selector.

Refer to jsFiddle: https://jsfiddle.net/jagrati16/o7bu09jr/1/

Delete row table using jQuery

You don't need to call preventDefault(). Simply returning false from the event handler has the same effect.

To remove the row where the <a> link is located, you can call $(this).closest("tr").remove():

$(document).ready(function() {
$("a").click(function(event) {
    alert("As you can see, the link no longer took you to jquery.com");
    var href = $(this).attr('href');
    alert(href);
    $(this).closest("tr").remove(); // remove row
    return false; // prevents default behavior
   });
);

Delete dynamically-generated table row using jQuery

You need to use event delegation because those buttons don't exist on load:

http://jsfiddle.net/isherwood/Z7fG7/1/

 $(document).on('click', 'button.removebutton', function () { // <-- changes
     alert("aa");
     $(this).closest('tr').remove();
     return false;
 });