Je crée dynamiquement une nouvelle table en cliquant sur un bouton d'entrée. Un nouveau bouton «supprimer» est également créé pour supprimer facilement la nouvelle table créée. Cependant, lorsque je clique sur Supprimer, le tableau est supprimé mais les boutons de suppression restent. Si j'attribue un attribut ID au bouton (1) dans cet exemple, il ne supprimera que la première instance et laissera les boutons de suppression restants en place. Comment puis-je supprimer ou masquer chaque bouton de suppression après avoir cliqué?

<!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>
0
Shane 4 nov. 2019 à 17:41

1 réponse

L'identifiant doit être unique, vous ne pouvez pas définir tous les boutons pour avoir l'identifiant 1. Essayez de définir un identifiant unique pour chaque bouton, puis vous pouvez obtenir l'élément par identifiant et le supprimer.

0
Francesco Manicardi 4 nov. 2019 à 14:55