0

Quisiera saber cómo eliminar una fila de una tabla, mediante un botón en cada fila, a continuación dejo un código pero no estaría entendiendo porque no funciona:

window.addEventListener('DOMContentLoaded', () => {
    const btnBorrar = document.getElementById("btnBorrar")
  
    btnBorrar.addEventListener("click", () => {
        const fila = document.createElement("fila")
        table.appenChild(btnBorrar);
        btnBorrar.addEventListener("click", evt => evt.target.remove());
    });
});
3
  • 2
    y que error aparece? en la consola o cual es el comportamiento inesperado que sucede al ejecutar el evento.
    – David081
    Commented el 11 nov. 2022 a las 11:55
  • createElement('fila') crea un elemento <fila>, lo que no tiene mucho sentido. De todos modos no lo usas para nada. El botón, por otro lado, se borra a si mismo Commented el 11 nov. 2022 a las 11:58
  • en la consola aparece el siguiente error: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at gestionEstudiantes.js:97:13
    – besgu
    Commented el 11 nov. 2022 a las 12:05

2 respuestas 2

0

Tengo otra forma de implementar la misma función, si aún no llegue tarde.

En cada botón en cada fila td hay un llamada a la función del trabajo a realizar.

<button onclick="eliminar(this)">Eliminar</button>

Y la función aparenta así:

  let row = Id.parentNode.parentNode;
  let table = document.getElementById("table"); 
  table.deleteRow(row.rowIndex);

Y el ejemplo funcional es el siguiente

function eliminar(Id) {
  
  let row = Id.parentNode.parentNode;
  let table = document.getElementById("table"); 
  table.deleteRow(row.rowIndex);

};
            
table {
width: 100%;
caption-side: bottom;
border-collapse: collapse;
vertical-align: top;
}

table * {
padding: 0.5rem 0.5rem;
border: 1px solid #777
}

table tr:nth-of-type(odd) {
background-color: #ccc
}
            
            
<table id="table">
        
        <thead>
            <th>#</th>
            <th>Nombre</th>
            <th>Opción</th>
        </thead>
        
        <tr> 
            <td>Fila uno td</td> 
            <td>Segunda fila</td> 
            <td><button onclick="eliminar(this)">Eliminar</button></td> 
        </tr> 
        
        <tr> 
            <td>Uno</td> 
            <td>Dos</td> 
            <td><button onclick="eliminar(this)">Eliminar</button></td> 
        </tr>
        
        <tr> 
            <td>Uno</td> 
            <td>Dos</td> 
            <td><button onclick="eliminar(this)">Eliminar</button></td> 
        </tr>
        
    </table>

            

0

A pesar de que la pregunta ya se respondio, quisiera agregar otra forma de hacer lo mismo

Se crea una tabla como cualquier otra

    <table>
        <thead>
            <tr>
                <th>Algo</th>
                <th>Algo 2</th>
                <th>Algo 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Dato1</td>
                <td>Dato2</td>
                <td>
                    <button type="button" class="eliminar">Eliminar</button>
                </td>
            </tr>
            <tr>
                <td>Dato1</td>
                <td>Dato2</td>
                <td>
                    <button type="button" class="eliminar">Eliminar</button>
                </td>
            </tr>
            <tr>
                <td>Dato1</td>
                <td>Dato2</td>
                <td>
                    <button type="button" class="eliminar">Eliminar</button>
                </td>
            </tr>
        </tbody>
    </table>

Y para eliminar cada fila, se haria de la siguiente manera:

document.querySelectorAll('.eliminar').forEach(boton => { //Se obtienen todos lo elementos con clase eliminar
        boton.addEventListener('click', () => {//Obtenemos el boton de cada fila y se agrega el evento click
            const tr = boton.parentNode.parentNode //Accedemos al tr de cada boton
            tr.remove() //Eliminamos la fila
        })
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.