Skip to main content
Se agrega snippet para mejorar la visualización.
Origen Enlace
DjCrazy
  • 7.1k
  • 3
  • 18
  • 42

Tu tabla quedaría así:

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

Y y tu función eliminar solamente constaría de una línea:

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

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>

Tu tabla quedaría así:

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

Y tu función eliminar solamente constaría de una línea:

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

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>

Origen Enlace

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

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

Y tu función eliminar solamente constaría de una línea:

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