Delete Table row using javascript

Question

I have an HTML table with insert and delete row functionality and its working perfectly. But delete functionality works with checkbox + delete button.

When i want to delete a row, first i checked the checkbox and then press delete button. I want to make it directly with delete button. Below is my code,

function deleteRow(tableID)
{
try
     {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
        for(var i=0; i<rowCount; i++)
            {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if (null != chkbox && true == chkbox.checked)
                {
                if (rowCount <= 1)
                    {
                    alert("Cannot delete all the rows.");
                    break;
                    }
                table.deleteRow(i);
                rowCount--;
                i--;
                }
            }
        } catch(e)
            {
            alert(e);
    }
   getValues();
}

<a onclick="deleteRow('dataTable')">Delete Row</a>

<table id="dataTable">
  <tr>
    <td><input type="checkbox" name="chk"/></td>
    <td><input type="text" name="Name"></td>
  </tr>
</table>

Note : Atleast 1 row should be there (Cannot delete all the rows)

where exactly is the delete button? do you have one below the table and you want to delete the focused row? or one delete button besides each row? — melc
@melc ohhh sorry i forget to add delete button, I updated my question, now check it — Arif
If you use only the delete button how do you plan to identify which row(s) should be deleted? — David Thomas
@DavidThomas yes I used delete button directly with each row but it delete all rows. I think if we use 1 specific ID with that button but i don't have any idea how to do it — Arif
Why are you complicating this? Stick with the checkbox, it's a user-interface people are familiar with, and far less complex than trying to guess which row should be acted on. And using an id would identify a particular row, yes. But what should happen on the second click, or the third? — David Thomas

melc melc · Accepted Answer · 2013-12-01T13:17:38

If you want to use one button, a usable solution is to select/unselect the rows to be deleted onclick. This way multi select and delete is also supported. For example,

http://jsfiddle.net/Nt4wZ/

js

function selectRow(row) {
    if (row.className.indexOf("selected") != -1) {
        row.className = row.className.replace("selected", "");
    } else {
        row.className += " selected";
    }
}

function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for (var i = 0; i < rowCount; i++) {
            var row = table.rows[i];
            /*var chkbox = row.cells[0].childNodes[0];*/
            /*if (null != chkbox && true == chkbox.checked)*/

            if (row.getElementsByTagName("input")[0].className.indexOf("selected")!=-1) {
                if (rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
    } catch (e) {
        alert(e);
    }
    //getValues();
}

html

<a onclick="deleteRow('dataTable')">Delete Row</a>

<table id="dataTable">
    <tr>
        <!-- <td><input type="checkbox" name="chk"/></td> -->
        <td>
            <input type="text" name="Name" onclick="selectRow(this)" />
        </td>
    </tr>
    <tr>
        <!-- <td><input type="checkbox" name="chk"/></td> -->
        <td>
            <input type="text" name="Name" onclick="selectRow(this)" />
        </td>
    </tr>
</table>

css

input.selected {
    border-color:lightgreen;
}

EDIT - response to comments

If you want to have a delete button for each row and use that instead, you can do something like the following,

http://jsfiddle.net/GRgMb/

html

<table id="dataTable">
    <tr>
        <!-- <td><input type="checkbox" name="chk"/></td> -->
        <td>
            <input type="text" name="Name" /><input type="button" value="delete" onclick="deleteRow('dataTable',this)" />
        </td>
    </tr>
    <tr>
        <!-- <td><input type="checkbox" name="chk"/></td> -->
        <td>
            <input type="text" name="Name" /><input type="button" value="delete" onclick="deleteRow('dataTable',this)" />
        </td>
    </tr>
</table>

js

function deleteRow(tableID,currentRow) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for (var i = 0; i < rowCount; i++) {
            var row = table.rows[i];
            /*var chkbox = row.cells[0].childNodes[0];*/
            /*if (null != chkbox && true == chkbox.checked)*/

            if (row==currentRow.parentNode.parentNode) {
                if (rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
    } catch (e) {
        alert(e);
    }
    //getValues();
}

Delete Table row using javascript

2 Answers