Remove html table row using javascript or jquery?

Question

I have a dynamic table in my html form that has functionality to add/drop rows. The name of each element has a number appended to the end of it specifying the row number (eg ID.0 , ID.1 , etc.). I have written this function to attempt to remove each row as well as update the name of each element:

function remove() {

    var theName=getItemNames();
    var counter=theName.length;
    var index=0;

    f.preventDefault();
    $(this).parents("tr").remove();
    counter--;

    $('input[name*="Id."]').each(function()   {

        $(this).attr("name", "Id."+index);
        index++;
    });
    $('input[name*="Date."]').each(function()   {

        $(this).attr("name", "Date."+index);
        index++;
    });
    $('input[name*="Value."]').each(function()   {

        $(this).attr("name", "Value."+index);
        index++;
    });
    $('input[name*="Required."]').each(function()   {

        $(this).attr("name", "Required."+index);
        index++;
    });

}

This, however, removes only the remove button and not the entire row as I expected it to. Can anyone see what I'm doing wrong?

Answer 1

Assuming your table looks something like this

<table>
    <tbody>
        <tr>
            <td></td>
            <td>col2</td>
            <td><input type="button" name="x" value="x" /></td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" name="x" value="x" /></td>
        </tr>
    </tbody>
</table>

Just use

$("input.btn" ).click(function(event) {
    $(this).parent().parent().remove();
});

Or

 $( "input.btn" ).click(function(event) {
        $(this).closest("tr").remove();
    });

As what you are doing is going to the parent which is the tr and then looking for a tr

If your table is being rendered by javascript you may also have to change your click on

$("input.btn" ).on(click, function(){
     $(this).closest("tr").remove();
}); 

Answer 2

The problem here is that you have named the function remove which does not trigger your function at all. It triggers the internal remove function and hence the button gets removed.

Try to rename the function to removeIt or something that is not already existing. You can then make it work.

Also whenever you try to call removeIt, do it this way: onclick="removeIt(this)" and catch it like removeIt(elem) .

Now you can do a $(elem).parents('tr').remove() :)

Working example Here .

Cheers!

Answer 3

尝试使用closest('tr').remove()

Answer 4

try this

Javascript

$(document).ready(function(){
$(".showaction").tipsy({gravity:'e'});

$(".deletenews") .click(function(){
var id_news = $(this).attr('rel');

var s = {
"id_news":id_news
}
$.ajax({
url:'delete_news.php',
type:'POST',
data:s,
beforeSend: function (){
        $(".loading[rel="+id_news+"]") .html("<img src=\"style/img/add.gif\" alt=\"Loading ....\" />");
        },
success:function(data){
$("tr[rel="+id_news+"]") .hide();
}
});
return false;
});




});

php

<table align="center" width="80%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="td3">
news
</td>
</tr>
<tr>
    <td width="70%" class="td1">
title
    </td>
    <td width="20%" class="td1">

edit / remove

 <?
    $select2 = $mysqli->query("SELECT * FROM news ORDER BY id  DESC LIMIT  20 ");
    $num2 = $select2->num_rows;
    while ($rows2 = $select2->fetch_array(MYSQL_ASSOC)){

$id_news2       = $rows2 ['id'];
$title_news2       = $rows2 ['title'];
$pic_news2       = $rows2 ['pic'];
$news_news2       = $rows2 ['news'];
?>
<tr rel="<? echo $id_news2; ?>">
    <td width="70%" class="td1">
<? echo $title_news2;  ?>
    </td>
    <td width="20%" class="td1">
<a href="edit_news.php?id=<? echo $id_news2; ?>"><img src="style/img/edit.gif" class="showaction" title="Edit" /></a> / <a rel="<? echo $id_news2; ?>" class="deletenews" href="#"><img src="style/img/del.gif" class="showaction" title="remove" /></a>
<span class="loading" rel="<? echo $id_news2; ?>"></span>
    </td>
</tr>
<tr>
<?
}
?>
</table>