0

Tengo una tabla donde esta el boton agregar que genera automaticamente un tr en la tabla con un boton eliminar al lado y mientras mas apretes el boton agregar mas agrega, y esta funcion que se encarga de borrar el un tr de mi tabla, sin embargo cuando pulso click en el boton con el onclick boton_eliminarFilas() solo me elimina la ultima, sin embargo deseo saber como hacer para eliminar exactamente el tr que pertenece al boton eliminar que pulso

function boton_eliminarFilas(){

$('#tabla_ver_agregar tbody tr:last-child').remove();

}

introducir la descripción de la imagen aquí

function agregarRenglon(){

var tabla= '<tr style="height:10px"></tr> <tr> <td class="sin_fondo" style="width:35%;"><input name="buscarProducto" type="text" style="width:96%; background-color:white; border: 1px solid #fff; border-radius:5px; margin-bottom:0px;" placeholder="Buscar producto" maxlength="149" id="buscarProducto" onKeyUp="buscadorProducto();" ></td> <td class="sin_fondo" style="width: 0.3%"></td> <td class="sin_fondo" style="width: 12%"><select type="text" style=" margin:0px; width:100%; -webkit-appearance: none; -moz-appearance : none; border: 2px solid #28b779; margin-left: 0px; margin-right: 0px; border-bottom-right-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px;  border-top-left-radius:5px; margin-bottom:0px; text-align:center;" name="ingresar_tipoCuenta" id="ingresar_tipoCuenta"> <option value="0">1 producto</option> <option value="1">2 productos</option> <option value="2">3 productos</option> <option value="3">4 productos</option> <option value="4">5 productos</option> <option value="5">6 productos</option> </select> </td> <td class="sin_fondo" style="width: 0.2%"></td> <td class="sin_fondo" style="width:50%;"> <input name="buscar_nombre" type="text" style="width:95%; background-color:white; border-radius:5px; margin-bottom:0px;" placeholder="Comentario" maxlength="149" id="buscar_nombre"></td><td class="sin_fondo"><a class="boton_eliminar" style="display:inline;cursor: pointer" onClick="boton_eliminarFilas();"><i class="icon-remove"></i></a> </td></tr>';

$("#tabla_ver_agregar tbody").append(tabla);

//$("#botonesEliminarFilas").html('<a class="boton_eliminar" style="margin-left:10px;" onClick="boton_eliminarFilas();"><i class="icon-remove"></i></a>');}
3
  • puedes poner el codigo de tu tabla y el que te genera las filas para ayudarte de mejor manera Commented el 10 may. 2019 a las 3:11
  • @IgmerRodriguez ya actualice un poco la pregunta añadiendo la funcion que añade las filas... gracias Commented el 10 may. 2019 a las 3:59
  • te dejo un link con la respuesta que buscas es.stackoverflow.com/questions/259705/… Commented el 10 may. 2019 a las 4:03

2 respuestas 2

1

Como no pusiite el código de tu tabla hice algo como esto, creo los elementos de manera dinámica, aquí agrego un contador, para que el id de los tr sean únicos, al igual agrego un boton para eliminar, le agrego un id también con el contador, dentro del mismo listener del click agrego otro, el cuál es del boton para eliminar, con el método this obtengo el id del boton que estoy apretando, y le hago un replace para quitarle el btn y lo dejo con el puro número que coincide con el id del tr, al oprimir el botón va a eliminar el tr, espero que te sirva y estoy seguro que se puede optimizar mucho más, pero todavía me falta demasiado para aprender JS. Cualquier duda hazla saber.

var tablita = document.getElementById('tablita');
var agregar = document.getElementById('agregar');

var contador = 0;

agregar.addEventListener('click',function(){

contador++

var tr = document.createElement('tr');
tr.id = contador;
var td = document.createElement('td');
var text = document.createTextNode(contador);
var btn = document.createElement('button');

btn.type = 'button';
btn.innerText = 'eliminar';
btn.id = 'btn'+contador;

td.append(text);
td.append(btn);
tr.append(td);
tablita.append(tr);

var btn_eliminar = document.getElementById('btn'+contador);

btn_eliminar.addEventListener('click',function(){

var id_tr = this.id;
id_tr = id_tr.replace('btn','');

var tr_eliminado = document.getElementById(id_tr);

tablita.removeChild(tr_eliminado);


});

});
<table border="1" id="tablita">

</table>

<button type="button" id="agregar">Agregar</button>

3
  • 1
    Perfecto gracias @VickMuñoz, funciona perfecto Commented el 10 may. 2019 a las 4:12
  • No hay de que compañero. :D Commented el 10 may. 2019 a las 4:14
  • No es necesario ningún contador. Dado que el botón está dentro del propio TR puedes mirar el parent del botón donde has hecho click hasta encontrar el <tr> y borrar ese TR, que será el correcto siempre... porque es el que contiene el botón :)
    – Benito-B
    Commented el 14 mar. a las 8:39
1

Otra alternativa para hacer esto con jquery seria colocar al botón o elemento que elimina el tr una clase, podría ser "quitar" el nombre de esa clase y con jquery, cada vez que hagas click sobre ese elemento se eliminara el tr.

Obviamente que ese elemento encargado de disparar la función tiene que estar dentro del tr que se quiere eliminar. Saludos.

$(document).on("click", ".quitar", function(){
    $(this).closest("tr").remove();
})

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.