Puedes emplear la delegación de eventos a través del objeto
event
. Básicamente consiste en registrar el evento
click
en el cuerpo de la tabla y, en la función de escucha, a partir del elemento
clickeado (al cual se puede acceder mediante la propiedad
target
del objeto del evento), que bien puede ser una celda, un botón en una celda, una imagen en una celda, etcétera, tomar a toda la fila que lo contiene y proceder a eliminar del cuerpo de la tabla.
Código Javascript
:
Ver originalvar tbody = document.querySelector("#idTabla tbody");
tbody.addEventListener("click", function(event){
if (event.target.tagName == "TD"){
let tr = event.target.parentNode;
tbody.removeChild(tr);
}
}, false);
Y, del mismo modo, puedes acceder a todos los datos que contiene esa fila.
Código Javascript
:
Ver originalvar tbody = document.querySelector("#idTabla tbody");
tbody.addEventListener("click", function(event){
if (event.target.tagName == "TD"){
let tr = event.target.parentNode, datos = [];
for (let i = 0, children = tr.children, n = children.length; i < n; i++){
datos.push(children[i].textContent);
}
}
}, false);
//El arreglo "datos" contiene los datos de las celdas de la fila afectada, los cuales podrás administrar a discreción tuya
En ambos ejemplos identifiqué al elemento pulsado mediante el nombre de su etiqueta HTML, pero también puedes usar identificadores tales como el id, la clase, un atributo personalizado, etc.