隱藏使用 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