Question

我有这个Javascript代码，无法删除表中的行。

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>

不太了解element.parentNode.parentNode.removeChild(element.parentNode.parentNode);的工作方式。我试图删除一个父节点，并且单击后按钮x也被删除。

Answer 1

使用

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

您两次输入element.parentNode.parentNode。就像：

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

由于明显的原因，它不起作用。再上一层：

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

但是，明确选择表行可能更容易阅读，

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>

在较新的浏览器上，您甚至不需要选择父级，只需在子级上调用.remove()：

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>

无法在“节点”上执行“ removeChild”：要删除的节点不是该节点的子节点

1 个答案: