remove row from html table with Jquery or JS

Question

remove row from html table with Jquery or JS

Navigation

#1 by (4 votes)
#2 by (1 votes)

5

How to delete the row of an html table with js or jquery or css ?, I have a table that shows product records of a Query SQL to my BD, I add a button where it opens a modal to register some data belonging to that record , when I have finished filling the form, I want to delete that row from the table, so far I have a JS function that I place in another button inside the table

the button inside the table if it works, implement the button inside the modal but only deletes the header of the table, this is my function

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

this is my 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>

javascript jquery html ajax

asked by Ivxn 05.05.2016 в 01:16

source

2 answers

Carousel Boopstrap with different intervals for each slide Does anyone know how to send a message by whatsapp using PHP? [closed]

score 4 · Answer 1

Improving the idea of Wanderson a bit, the most practical thing is to have a function that is fixed directly where the button is and erase that line, that way you do not need any type of id

<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>

Javascript:

$(document).on('click', '.borrar', function (event) {
    event.preventDefault();
    $(this).closest('tr').remove();
});

Here's the working example: link

score 1 · Answer 2

You can place a id to every tr when you're painting your table, so in your Delete function you can go give it a .remove (from jquery) as follows:

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

Here is an example in JSBIN: link

Your table would look like this:

<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>

And your delete function would only consist of one line:

function eliminarFila(index) {
    $("#fila" + index).remove();
}