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..

Answer 1

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.

Answer 2

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.

Answer 3

    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>