隐藏使用 JavaScript 动态创建的输入按钮

Question

我通过单击输入按钮动态创建一个新表。 还创建了一个新的“删除”按钮，以便轻松删除新创建的表。 但是，当我单击删除时，表格被删除，但删除按钮仍然存在。 如果我在此示例中为按钮 (1) 分配了一个 ID 属性，它只会删除第一个实例并保留剩余的删除按钮。 单击后如何删除或隐藏每个删除按钮？

<!DOCTYPE html>
<html>

<body>
    <input id="btnNew" type="button" value="Add Item" onclick="CreateTable()" />
</body>

<script>
    function CreateTable() {

        // CREATE DYNAMIC TABLE.
        var table = document.createElement('table');

        // SET THE TABLE ID.
        table.setAttribute('id', 'empTable');

        var arrHead = new Array();
        arrHead = ['Field 1', 'Field 2', 'Field 3'];

        var arrValue = new Array();
        arrValue.push(['<input id="Text1" type="text" />', '<input id="Text1" type="text" />', '<input id="Text1" type="text" />']);

        var tr = table.insertRow(-1);

        for (var h = 0; h < arrHead.length; h++) {
            var th = document.createElement('th');              // TABLE HEADER.
            th.innerHTML = arrHead[h];
            tr.appendChild(th);
        }

        for (var c = 0; c <= arrValue.length - 1; c++) {
            tr = table.insertRow(-1);

            for (var j = 0; j < arrHead.length; j++) {
                var td = document.createElement('td');          // TABLE DEFINITION.
                td = tr.insertCell(-1);
                td.innerHTML = arrValue[c][j];                  // ADD VALUES TO EACH CELL.
            }
        }

        // NOW CREATE AN INPUT BOX TYPE BUTTON USING createElement() METHOD.
        var button = document.createElement('input');

        // SET INPUT ATTRIBUTE 'type', 'value' and 'id' OF DELETE BUTTON.
        button.setAttribute('type', 'button');
        button.setAttribute('value', 'Delete');
        button.setAttribute('id', '1');

        // ADD THE BUTTON's 'onclick' EVENT.
        button.setAttribute('onclick', 'RemoveDeleteButton()');

        // FINALLY ADD THE NEWLY CREATED TABLE AND BUTTON TO THE BODY.
        document.body.appendChild(table);
        document.body.appendChild(button);
    }

    function RemoveDeleteButton() {
        var empTable = document.getElementById('empTable').remove();
        document.getElementById('1').style.visibility = 'hidden';
    }
</script>
</html>

Answer 1

id 需要唯一，不能将所有按钮都设置为 id 1。尝试为每个按钮设置唯一的 id，然后可以通过 id 获取元素并将其删除。

隐藏使用 JavaScript 动态创建的输入按钮

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-11-04 14:55:21

隐藏使用 JavaScript 动态创建的输入按钮

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-11-04 14:55:21

解决方案1
0 已采纳 2019-11-04 14:55:21