Delete function in JavaScript

Question

I trying to delete row from a table but somehow is not working. Could please let me know how can I solve this one ?

here is my html with table and javascript:

<tbody class="items">
    <tr>
        <td> Data 1 </td>
        <td> Data 2 </td>
    </tr>
</tbody>

<tbody id="test">
    <tr>
        <td> </td>
        <td> </td>
    </tr>
</tbody>

$(".items tr").click(function() {
    var value = parseInt($.trim(tableData[1]));
    $("#test").append(
        "<tr><td><input name='sm_invnumber[]' value='" + 
        $.trim(tableData[0]) + 
        "' style='width: 170px;' readonly ></td><td><input name='sm_amount[]' value='" +          
        $.trim(tableData[1]) + 
        "' style='width: 170px; text-align: right;' readonly ></td><td><span onclick='deleteRow(value, this)'> x </span> </td></tr>");
});

function deleteRow(value, row) {
    var i = row.parentNode.parentNode.rowIndex;
    document.getElementById('#test').deleteRow(i);
}

Here is the instruction that I am working with: Picking data by clicking on table (class= items) and place to them into table (id=test). there is a function with 'X'. I want to delete this row.

Helps are highly appreciated.

document.getElementById('test') instead of document.getElementById('#test') — A. Wolff
– A. Wolff, Commented Feb 25, 2014 at 11:44
possible duplicate of How to delete dom element from jquery object — Liam
– Liam, Commented Feb 25, 2014 at 11:45

Andy · Accepted Answer · 2014-02-25 11:50:32Z

3

You seem to making your life very difficult. Why not simply add a class to the cell that has the cross and use jQuery to remove its containing row. For example:

<table>
  <tbody id="test">
    <tr><td>Data 1</td><td class="delete">x</td></tr>
    <tr><td>Data 2</td><td class="delete">x</td></tr>
    <tr><td>Data 3</td><td class="delete">x</td></tr>
  </tbody>
</table>

$('.delete').click(function () {
  $(this).parent().remove();
});

Fiddle

answered Feb 25, 2014 at 11:50

Andy

63.7k13 gold badges72 silver badges99 bronze badges

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

1 Comment

user3265065 Over a year ago

Thank you. solutions are working well. But one is perfect for me which one I accepted.

Paulo Lima · Accepted Answer · 2014-02-25 11:47:05Z

1

try this

function deleteRow(value, span)
{
    $(span).closest("tr").remove();
 }

or

function deleteRow(value, span)
{
     var i=row.parentNode.parentNode.rowIndex;
     $(document.getElementById('test')).children(":eq("+i+")").remove();
 }

answered Feb 25, 2014 at 11:47

Paulo Lima

1,2388 silver badges8 bronze badges

1 Comment

user3265065 Over a year ago

Thank you. solutions are working well. But one is perfect for me which one I accepted.

2 revs · Accepted Answer · 2014-02-25 11:53:21Z

0

There are few poblems, try

jQuery(function () {
    var tableData = [1, 'test'];
    $(".items tr").click(function () {
        var value = parseInt($.trim(tableData[1]));
        $("#test").append(
            "<tr><td><input name='sm_invnumber[]' value='" + $.trim(tableData[0]) + "' style='width: 170px;' readonly ></td><td><input name='sm_amount[]' value='" + $.trim(tableData[1]) + "' style='width: 170px; text-align: right;' readonly ></td><td><span onclick='deleteRow(\"" + value + "\",this)'> x </span> </td></tr>");
    });
})

function deleteRow(value, row) {
    $(row).closest('tr').remove();
}

Demo: Fiddle, another version

edited Feb 25, 2014 at 11:53

community wiki

2 revs
Arun P Johny

Collectives™ on Stack Overflow

Delete function in JavaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related