8

¿Como eliminar la fila de una tabla html con js o jquery o css?, Tengo una tabla que muestra registros producto de una Query SQL a mi BD, agrego un botón donde abre una modal para registrar algunos datos pertenecientes a ese registro, cuando ya he terminado de llenar el form, quiero eliminar esa fila de la tabla, hasta el momento tengo una función JS que coloco en otro botón dentro de la tabla introducir la descripción de la imagen aquí

el boton dentro de la tabla si funciona, implemente el boton dentro de la modal pero solo me elimina el encabezado de la tabla, estas es mi funcion

    function Eliminar(i) {
        document.getElementsByTagName("table")[0].setAttribute("id", "tableid");
        document.getElementById("tableid").deleteRow(i);
    }

esta es mi modal

    @<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Agregar Campos</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="contenedor-formulario">
                            <div class="wrap">
                                <div id="formularioChip">
                                <form action="" class="formulario" name="formulario"  id="formulario">
                                    <div>
                                        <input type="text" id="icc" name="icc" hidden/><br /><input type="text" id="txtFechaa" name="txtFechaa" /><br />
                                        <div class="input-group">
                                            <input type="text" id="celular" name="celular" class="campos">
                                            <label class="label" for="celular">Celular</label>
                                        </div>
                                        <label style="color: black;">Estatus</label>
                                        <div class="input-group radio">

                                            <select name="estatus" id="estatus">
                                                <option value="" disabled selected>Selecciona Opción</option>
                                                <option value="PARAD">PARAD</option>
                                                <option value="OTROS">OTROS</option>
                                            </select>
                                        </div>

                                        <input type="button" id="btn-submit" value="Enviar">
                                    </div>
                                </form>
                                </div>
                                <div id="muestraMensaje">
                                    <SPAN style="color:black">Exito</SPAN><br />
                                    <input  type="button" value="Aceptar" onclick="Eliminar(this.parentNode.parentNode.rowIndex)" />
                                    <button type="button" class="btn btn-success" onclick="remove(this.parentNode.parentNode.rowIndex)">Aceptar</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  

1
  • 3
    Falta un poco más de código, podemos ver al menos el código que está siendo borrado y el que se desea borrar?
    – Shaz
    Commented el 5 may. 2016 a las 0:35

2 respuestas 2

12

Mejorando un poco la idea de Wanderson, lo más práctico es tener una función que se fije directamente donde está el botón y borre esa línea, de esa manera no necesitas ningún tipo de id

$(document).on('click', '.borrar', function(event) {
  event.preventDefault();
  $(this).closest('tr').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Columna 1.1</td>
    <td>Columna 1.2</td>
    <td>Columna 1.3</td>
    <td>Columna 1.4</td>
    <td>Columna 1.5</td>
    <td>Columna 1.6</td>
    <td><input type="button" class="borrar" value="Eliminar" /></td>
  </tr>
<table>

Acá el ejemplo funcionando: http://jsbin.com/xekofexonu/1/edit?html,js,output

6
  • Buenísimo! Gracias. Commented el 5 may. 2016 a las 18:34
  • Si te parece que esta respuesta da por respondida tu pregunta, por favor marcala como aceptada para que los demas sepan que ya fue respondida. Saludos! Commented el 5 may. 2016 a las 19:07
  • funciona perfecto gracias Commented el 12 ene. 2017 a las 2:05
  • Una pregunta para que utiliza el preventDefault? entiendo que funciona para cancelar un evento predeterminado de un control, pero en este caso, cual es la función? Commented el 14 dic. 2018 a las 16:04
  • @CarlosDanielZárateRamírez En este caso previene que se haga submit del form (si hubiera). Pero tenes razón que pueda ser que sea inútil en este ejemplo. Commented el 21 nov. 2019 a las 12:19
3

Puedes colocarle un id a cada tr cuando estes pintando tu tabla, así en tu función Eliminar podes ir a darle un .remove (de jquery) de la siguiente forma:

$("#fila1").remove();

Te dejo un ejemplo en JSBIN: http://jsbin.com/teduko/edit?html,console,output

Tu tabla quedaría así y tu función eliminar solamente constaría de una línea:

function eliminarFila(index) {
  $("#fila" + index).remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr id="fila0">
    <td>Columna 1</td>
    <td>Columna 2</td>
    <td>Columna 3</td>
    <td>Columna 4</td>
    <td>Columna 5</td>
    <td>Columna 6</td>
    <td><input type="button" onclick="eliminarFila(0);" value="Eliminar" /></td>
  </tr>
  <tr id="fila1">
    <td>Columna 1</td>
    <td>Columna 2</td>
    <td>Columna 3</td>
    <td>Columna 4</td>
    <td>Columna 5</td>
    <td>Columna 6</td>
    <td><input type="button" onclick="eliminarFila(1);" value="Eliminar" /></td>
  </tr>
  <tr id="fila2">
    <td>Columna 1</td>
    <td>Columna 2</td>
    <td>Columna 3</td>
    <td>Columna 4</td>
    <td>Columna 5</td>
    <td>Columna 6</td>
    <td><input type="button" onclick="eliminarFila(2);" value="Eliminar" /></td>
  </tr>
  <tr id="fila3">
    <td>Columna 1</td>
    <td>Columna 2</td>
    <td>Columna 3</td>
    <td>Columna 4</td>
    <td>Columna 5</td>
    <td>Columna 6</td>
    <td><input type="button" onclick="eliminarFila(3);" value="Eliminar" /></td>
  </tr>
  <tr id="fila4">
    <td>Columna 1</td>
    <td>Columna 2</td>
    <td>Columna 3</td>
    <td>Columna 4</td>
    <td>Columna 5</td>
    <td>Columna 6</td>
    <td><input type="button" onclick="eliminarFila(4);" value="Eliminar" /></td>
  </tr>
</table>

1
  • Interesante respuesta Commented el 25 mar. 2017 a las 15:19

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.