CODEWITHSUNDEEP
javascript
Steve
Steve

Reputation: 4483

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

I have this Javascript code which I could not delete the row of the table.

var cart = [
        { id: 1, product: 'Logitech Mouse', unitprice: 45, quantity: 2, total: 90 },
        { id: 2, product: 'Microsoft Keyboard', unitprice: 50, quantity: 1, total: 50 }
    ];

    function makeTable(object) {
        debugger
        // Check type
        if (typeof object !== 'object') return false;

        // Start our HTML
        var html = "<table><tbody><tr><td>Product</td>\
            <td>Price</td><td>Unit</td><td>Total</td><td></td></tr>";

        // Loop through members of the object
        object.forEach(function (item) {
            console.log(item);
            html += `<tr><td>${item.product}</td><td>${item.unitprice}</td>\
                <td><button>+</button>${item.quantity}<button>-</button>\
                </td><td>${item.total} <button class=del>x</button></td></tr>`;
        });

        // Finish the table:
        html += "</tbody></table>";
        // Return the table
        return html;
    }

    document.getElementById('shoppingCart').innerHTML = makeTable(cart);

    var del = document.getElementsByClassName('del');

    Array.prototype.forEach.call(del, function (element) {
        element.addEventListener('click', function () {
            console.log(element);
            element.parentNode.parentNode.removeChild(element.parentNode.parentNode);
        });
    });
 <div id="shoppingCart"></div>

Not quite understand how element.parentNode.parentNode.removeChild(element.parentNode.parentNode); works. I tried to remove one parentNode and button x is removed after click.

Upvotes: 0

Views: 361

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370769

With

element.parentNode.parentNode.removeChild(element.parentNode.parentNode);

you've typed element.parentNode.parentNode twice. It's like:

const parent = element.parentNode.parentNode;
parent.removeChild(parent);

which doesn't work, for obvious reasons. Go up one more level:

element.parentNode.parentNode.parentNode.removeChild(element.parentNode.parentNode);

It might be more readable to explicitly select the table row, though:

const tr = element.closest('tr');
tr.parentElement.removeChild(tr);


var cart = [
        { id: 1, product: 'Logitech Mouse', unitprice: 45, quantity: 2, total: 90 },
        { id: 2, product: 'Microsoft Keyboard', unitprice: 50, quantity: 1, total: 50 }
    ];

    function makeTable(object) {
        debugger
        // Check type
        if (typeof object !== 'object') return false;

        // Start our HTML
        var html = "<table><tbody><tr><td>Product</td>\
            <td>Price</td><td>Unit</td><td>Total</td><td></td></tr>";

        // Loop through members of the object
        object.forEach(function (item) {
            html += `<tr><td>${item.product}</td><td>${item.unitprice}</td>\
                <td><button>+</button>${item.quantity}<button>-</button>\
                </td><td>${item.total} <button class=del>x</button></td></tr>`;
        });

        // Finish the table:
        html += "</tbody></table>";
        // Return the table
        return html;
    }

    document.getElementById('shoppingCart').innerHTML = makeTable(cart);

    var del = document.getElementsByClassName('del');

    Array.prototype.forEach.call(del, function (element) {
        element.addEventListener('click', function () {
            const tr = element.closest('tr');
            tr.parentElement.removeChild(tr);
        });
    });
<div id="shoppingCart"></div>

On newer browsers, you don't even need to select the parent, you can just call .remove() on the child:

element.closest('tr').remove();


var cart = [
        { id: 1, product: 'Logitech Mouse', unitprice: 45, quantity: 2, total: 90 },
        { id: 2, product: 'Microsoft Keyboard', unitprice: 50, quantity: 1, total: 50 }
    ];

    function makeTable(object) {
        debugger
        // Check type
        if (typeof object !== 'object') return false;

        // Start our HTML
        var html = "<table><tbody><tr><td>Product</td>\
            <td>Price</td><td>Unit</td><td>Total</td><td></td></tr>";

        // Loop through members of the object
        object.forEach(function (item) {
            html += `<tr><td>${item.product}</td><td>${item.unitprice}</td>\
                <td><button>+</button>${item.quantity}<button>-</button>\
                </td><td>${item.total} <button class=del>x</button></td></tr>`;
        });

        // Finish the table:
        html += "</tbody></table>";
        // Return the table
        return html;
    }

    document.getElementById('shoppingCart').innerHTML = makeTable(cart);

    var del = document.getElementsByClassName('del');

    Array.prototype.forEach.call(del, function (element) {
        element.addEventListener('click', function () {
            element.closest('tr').remove();
        });
    });
<div id="shoppingCart"></div>

Upvotes: 1

Related Questions