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 (e.g. 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?

Can you create a jsFiddle.net example of the issue?

j08691
– j08691

2013-08-26 16:26:57 +00:00
Commented Aug 26, 2013 at 16:26 — j08691
– j08691, Commented Aug 26, 2013 at 16:26
Can you post the associated markup?

kunalbhat
– kunalbhat

2013-08-26 16:27:09 +00:00
Commented Aug 26, 2013 at 16:27 — kunalbhat
– kunalbhat, Commented Aug 26, 2013 at 16:27
@macklin do let me know if you solve this one.

Sunny R Gupta
– Sunny R Gupta

2013-08-27 08:41:38 +00:00
Commented Aug 27, 2013 at 8:41 — Sunny R Gupta
– Sunny R Gupta, Commented Aug 27, 2013 at 8:41

sam_codes · Accepted Answer · 2013-08-26 16:54:54Z

2

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

answered Aug 26, 2013 at 16:54

sam_codes

1916 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sunny R Gupta · Accepted Answer · 2013-08-26 17:02:09Z

1

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!

edited Aug 26, 2013 at 17:02

answered Aug 26, 2013 at 16:55

Sunny R Gupta

5,1461 gold badge33 silver badges41 bronze badges

Comments

Vlad · Accepted Answer · 2013-08-26 16:45:44Z

0

Try using closest('tr').remove()

answered Aug 26, 2013 at 16:45

Vlad

9786 silver badges13 bronze badges

Comments

Mahmoud Samy · Accepted Answer · 2013-08-26 16:50:18Z

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>

Collectives™ on Stack Overflow

Remove html table row using javascript or jquery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related