table Supprimer ligne en utilisant jQuery

Question

Supposons que j'ai une table comme celui-ci

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

Supprimer est un lien par exemple <a href="http://localhost/student/delete/1">. Dans le cas réel, je supprime l'élève en utilisant ajax. Afin de simplifier le code, je viens d'alerter le lien et d'omettre le script ajax. Je veux juste savoir Comment supprimer une ligne du document html en utilisant 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(); 
    }); 
); 

Je veux, Après que j'alerte le lien, la ligne sélectionnée sera automatiquement supprimée. Y a-t-il une suggestion sur la façon de mettre en œuvre celui-ci?

Answer 1

Vous n'avez pas besoin d'appeler preventDefault(). Le simple renvoi de false à partir du gestionnaire d'événements a le même effet.

Pour supprimer la ligne où le lien <a> est situé, vous pouvez appeler $ (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

Ajoutez un ID à chaque <tr> appelé row_9714 et ajoutez un ID 9714 au lien. Ensuite, dans votre appel de gestionnaire d'événement click:

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

Remarque - 9714 est juste un ID fictif. Utilisez simplement un numéro unique ici pour chaque ligne.

Answer 3

Cet exemple supprime les lignes d'une table avec 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>