Estoy creando dinámicamente una nueva tabla con el clic de un botón de entrada. También se crea un nuevo botón 'eliminar' para facilitar la eliminación de la tabla recién creada. Sin embargo, cuando hago clic en Eliminar, la tabla se elimina, pero los botones de eliminación permanecen. Si asigno un atributo ID al botón (1) de este ejemplo, solo quitará la primera instancia y dejará los botones de eliminación restantes en su lugar. ¿Cómo puedo eliminar u ocultar cada botón de eliminación después de hacer clic en él?

<!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 a las 17:41

1 respuesta

El identificador debe ser único, no se puede establecer todos los botones para que tengan id 1. Intente establecer un identificador único para cada botón, luego puede obtener el elemento por id y eliminarlo.

0
Francesco Manicardi 4 nov. 2019 a las 14:55