tabla Eliminar fila usando jQuery

Question

Supongamos que tengo una tabla como ésta

id name address  action 
-------------------------------------- 
s1 n1 a1  delete 
s2 n2 a2  delete 

de eliminación es un enlace, por ejemplo <a href="http://localhost/student/delete/1">. En el caso real, elimino al estudiante usando ajax. Para simplificar el código, acabo de alertar al enlace y omitir el script ajax. Solo quiero saber cómo eliminar una fila del documento html usando jquery.

$(document).ready(function() { 
$("a").click(function(event) { 
    alert("As you can see, the link no longer took you to jquery.com"); 
     var href = $(this).attr('href'); 
     alert(href); 
     event.preventDefault(); 
    }); 
); 

Deseo, Después de alertar al enlace, la fila seleccionada se eliminará automáticamente. ¿Hay alguna sugerencia sobre cómo implementar esta?

Answer 1

No necesita llamar a preventDefault(). Simplemente devolver falso desde el controlador de eventos tiene el mismo efecto.

Para eliminar la fila donde se encuentra el enlace <a>, puede llamar $ (this) .closest ("tr") remove():.

$(document).ready(function() { 
$("a").click(function(event) { 
    alert("As you can see, the link no longer took you to jquery.com"); 
    var href = $(this).attr('href'); 
    alert(href); 
    $(this).closest("tr").remove(); // remove row 
    return false; // prevents default behavior 
    }); 
); 

Answer 2

Agregue un identificador a cada <tr> llamado y añada una identificación 9714 al vínculo. Luego, en su controlador de evento click, llame al:

var thisId = $(this).attr('id'); 
$("#row_" + thisId).remove(); 

Nota - 9714 es solo una identificación ficticia. Solo use un número único aquí para cada fila.

Answer 3

este ejemplo se quitan filas de una tabla con jQuery .

$(document).ready(function() { 
 
$("#my_table .remove_row").click(function() { 
 
\t $(this).parents("tr:first")[0].remove(); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table" border="1" id="my_table"> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td><button type="button" class="remove_row">X</button></td> 
 
     </tr> 
 
     <tr> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td><button type="button" class="remove_row">X</button></td> 
 
     </tr> 
 
    </tbody> 
 
</table>