Tuto Jquery

Supprimer un élément avec Jquery

Comment supprimer un élément avec Jquery? Il peut parfois être intéressant de supprimer un élément dans une page HTML sans forcément avoir besoin de rafraîchir cette page. Jquery propose 2 méthode pour cela. Les méthodes "remove" et "empty" servent respectivement à supprimer un élément HTML et à supprimer le contenu d'un élément HTML.

Supprimer une balise HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test remove Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div>Jacques a dit: </div>
    <div class="baratin">bla bla bla bla bla bla bla</div>
    <script>
        $( ".baratin" ).remove();
    </script>
</body>
</html>

Supprimer le contenu d'une balise HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test empty Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div>Pierre a dit: </div>
    <div class="baratin">bla bla bla bla bla bla bla</div>
    <script>
        $( ".baratin" ).empty();
    </script>
</body>
</html>