Delete HTML table row dynamically using javascript with row index with link

Question

I wanted to dynamically add/delete table rows in HTML. I know there are quite a lot of questions in this forum with similar query. My doubt is to make the delete action applicable for each of the rows. For this, I was using the table index.

//Link
var cell7 = row.insertCell(6);
var element7 = document.createElement("a");
var text = document.createTextNode("Delete");
element7.appendChild(text);
element7.setAttribute("href","javascript:deleterow("+rowcount+")");
element7.name="reqlink[]";
cell7.appendChild(element7);

Here rowcount is the index of the currently added row. So, while adding the row, I define the delete action as well. So, there will be a delete link for each of the row. However, the problem is the index varies dynamically. So, this solution will not really work.

Please can you help? I dont want to use the check box as defined by one of the solution.

The delete row function is scripted as follows:

function deleterow(index){
    alert('working' + index);
    table.deleteRow(index);
}

######### Tried this ###########

//Link
var cell7 = row.insertCell(6);
var element7 = document.createElement("a");
var text = document.createTextNode("Delete");
element7.appendChild(text);
element7.setAttribute("href","javascript:deleterow(this); return false");
element7.name="reqlink[]";
cell7.appendChild(element7);

The "this" points to window and not the table row..

Give each of your table rows a unique Id and use that id to delete the row instead. Otherwise you could pass the parent row into the function instead of a specific number. — vogomatix
– vogomatix, Commented Jan 10, 2014 at 11:56
example, please.. Am inserting a row with this code: var row = table.insertRow(rowCount); — Hariprasauth Ramamoorthy
– Hariprasauth Ramamoorthy, Commented Jan 10, 2014 at 11:58
May I suggest you start upvoting some of the answers you are getting? :) — Nick
– Nick, Commented Jan 12, 2014 at 0:40

Vlad · Accepted Answer · 2014-01-10 13:09:27Z

5

Solution is to pass the current row element to the deleteRow function and remove it using its parent element(you can not remove it directly), so function will look like this:

 var deleteRow = function (link) {
     var row = link.parentNode.parentNode;
     var table = row.parentNode; 
     table.removeChild(row); 
 }

HTML for delete link is following

<a onclick="javascript:deleteRow(this); return false;">

Use following line to create element dynamically(also be careful with uppercase and lowercase characters):

element7.setAttribute("onclick","deleteRow(this); return false");

So, using ID's for deleting rows is unnecessary. Hope this will help.

edited Jan 10, 2014 at 13:09

answered Jan 10, 2014 at 12:07

Vlad

512 bronze badges

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

4 Comments

Hariprasauth Ramamoorthy Over a year ago

Thanks for the response. However, "this" is not getting passed. Its window.. Now the row definition..

Vlad Over a year ago

My mistake, do not thought about tables at all. This code works. var deleteRow = function (link) { var row = link.parentNode.parentNode; var table = row.parentNode; table.removeChild(row); }

Hariprasauth Ramamoorthy Over a year ago

Sorry, I am not getting it. Please can you edit the answer? I am adding the table dynamically through javascript..

Vlad Over a year ago

Edited the comment. Use onclick property instead on href. It may help.

Aditya Shedge · Accepted Answer · 2014-01-10 12:18:49Z

1

dont use index of the row. it is wrong on so many levels. imagine u deleted 1st 3 cells and your index has changed. if you want to delete the 4th row it will actually delete 7th row instead of 4th row in your actual table.

add a "data-id" field in your which has a unique id for every row. use this to delete the row.

BETTER SOLUTION: this is in jQuery so find the js prototype equivalent.

$(this).closest("tr").html("")

and $(this) is your button which is clicked. so do the js equivalent of the above for 'click' event of the button.

answered Jan 10, 2014 at 12:18

Aditya Shedge

313 bronze badges

2 Comments

Hariprasauth Ramamoorthy Over a year ago

What does closest mean?

Aditya Shedge Over a year ago

in jQuery closest gives you the first element that is in the hierarchy of the DOM which has the element to which you call closest. api.jquery.com/closest

logan Sarav · Accepted Answer · 2014-01-10 12:56:19Z

0

    according to Aditya Shedge use closest itself. u can see closet definition here: http://api.jquery.com/closest/


here is an example:

<table id="foo" border="1">
            <tr>
                <td>check</td>
                <td><input type="text></td>
                    <td><input type="text></td>
                <td><input type="button" class="addButton" value="add"/></td>
                <td><input type="button" class="deleteButton" value="delete"/></td>
            </tr>
        </table>


<script>
$(function(){
    $(".addButton").click(function(){
        $(this).closest("tr").clone(true).appendTo("#foo");
    });

    $(".deleteButton").click(function(){
        $(this).closest("tr").remove();
    });
});
</script>

edited Jan 10, 2014 at 12:56

answered Jan 10, 2014 at 12:10

logan Sarav

7816 silver badges27 bronze badges

Collectives™ on Stack Overflow

Delete HTML table row dynamically using javascript with row index with link

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related