Comment supprimer un élément du DOM avec jQuery

juin 30, 2019février 10, 2020 Amine KOUIS Aucun commentaire

Si vous souhaitez supprimer l’élément lui-même ainsi que tout ce qu’il contient, utilisez simplement la méthode remove() de jQuery. L’exemple suivant vous montrera comment supprimer complètement un bloc div du DOM.

Code jQuery:

$(document).ready(function() {
    $("button").click(function() {
        $("div").remove();
    });
});

Code HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Supprimer un élément du DOM avec jQuery</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
		  // Mettez le code jQuery ici.
    </script>
  </head>
  <body>
    <button>Supprimer le bloc</button>
    <div>
      <h1>Grand titre</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate. Pellentesque pharetra massa nec imperdiet commodo. Pellentesque felis est, congue eget consequat at, vestibulum in enim. Mauris dictum mi dictum, consectetur nibh sed, vulputate risus. Sed mattis, nisi et sodales gravida, nunc magna feugiat massa, non maximus quam felis quis massa. Aenean non massa massa. Donec ac justo non massa facilisis porta. Aliquam ligula sem, fringilla eget sagittis sit amet, venenatis non felis. In lobortis vel turpis sit amet vestibulum. Curabitur vulputate sapien sed dignissim tempor. Sed eget libero urna. Donec non lectus sed risus ultrices maximus.</p>
    </div>
  </body> 
</html>

Résultat
Grand titre Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate. Pellentesque pharetra massa nec imperdiet commodo. Pellentesque felis est, congue eget consequat at, vestibulum in enim. Mauris dictum mi dictum, consectetur nibh sed, vulputate risus. Sed mattis, nisi et sodales gravida, nunc magna feugiat massa, non maximus quam felis quis massa. Aenean non massa massa. Donec ac justo non massa facilisis porta. Aliquam ligula sem, fringilla eget sagittis sit amet, venenatis non felis. In lobortis vel turpis sit amet vestibulum. Curabitur vulputate sapien sed dignissim tempor. Sed eget libero urna. Donec non lectus sed risus ultrices maximus.

Résultat

Grand titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate. Pellentesque pharetra massa nec imperdiet commodo. Pellentesque felis est, congue eget consequat at, vestibulum in enim. Mauris dictum mi dictum, consectetur nibh sed, vulputate risus. Sed mattis, nisi et sodales gravida, nunc magna feugiat massa, non maximus quam felis quis massa. Aenean non massa massa. Donec ac justo non massa facilisis porta. Aliquam ligula sem, fringilla eget sagittis sit amet, venenatis non felis. In lobortis vel turpis sit amet vestibulum. Curabitur vulputate sapien sed dignissim tempor. Sed eget libero urna. Donec non lectus sed risus ultrices maximus.