JS - Delete Table Row not working?

Question

I currently have a add and delete row. I have set it up for design elements with a div, However when i try and delete a row it doesn't delete, i was wondering if you might be able to help.

Check it out here with the HTML code too!

http://jsfiddle.net/D77Dz/1/

<script language="javascript">
    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
                case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
            }
        }
    }

    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[5].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);
        }
    }
</script>

cookie monster · Accepted Answer · 2014-02-24 19:43:35Z

1

This:

var chkbox = row.cells[5].childNodes[0];

should be this:

var chkbox = row.cells[5].children[0].children[0];

The way you had it, you were referring to a TextNode.

When you change it to .children[0], you get the DIV element that wraps the input, so you need to get the first child element of that DIV.

answered Feb 24, 2014 at 19:43

cookie monster

11k4 gold badges33 silver badges45 bronze badges

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

Comments

Goran.it · Accepted Answer · 2014-02-24 19:40:32Z

0

You need to change this line:

var chkbox = row.cells[5].childNodes[0];

to:

var chkbox = row.querySelector('input[type=checkbox]');

answered Feb 24, 2014 at 19:40

Goran.it

6,3772 gold badges25 silver badges26 bronze badges

Comments

TastySpaceApple · Accepted Answer · 2014-02-24 19:48:28Z

You're problem is in referring to the chkbox element, in deleteRow, here:

var chkbox = row.cells[5].childNodes[0];

When you have problems, try using console.log to trace your code at potentially hazardous lines. In this example console.log(chkbox) returns the wrapping div, and not the checkbox as was intended. so change to:

var chkbox = row.cells[5].childNodes[0].childNodes[0];

or forget the whole long tree traversal by using the queryselector

var chkbox = row.querySelector('input[type=checkbox]');

see the working fiddle http://jsfiddle.net/SpacePineapple/D77Dz/2/

P.S I saw you were trying to implement placeholders (default values). You might want to take a look at the html5 specification for placeholder

Collectives™ on Stack Overflow

JS - Delete Table Row not working?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related