How to Remove Elements from DOM in jQuery

admin January 5, 2021October 10, 2021 0 Comments jquery remove element

In this tutorial, we are going to see how to Remove Elements from DOM in jQuery. If you want to remove the element itself along with everything in it, just use jQuery’s remove() method. The following example will show you how to completely remove a div block from the DOM.

jQuery Code:

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

HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>How to Remove Elements from DOM</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
		  // Put the jQuery code Here
    </script>
  </head>
  <body>
    <button>Delete block</button>
    <div>
      <h1>Big Title</h1>
      <p>Lorem ipsum dolor sit amet, curabitur erat nibh, mollis ut tempor ac, pellentesque eu ante. In elementum, dolor vel accumsan elementum, tellus felis ultricies augue, at accumsan nisl lorem dapibus quam. Proin in leo rhoncus, viverra sem non, placerat purus. Fusce iaculis libero at est varius eleifend. Sed at odio luctus, mattis urna id, porttitor mauris. Nam et magna tincidunt, mattis est ac, tempus enim. In consequat a tellus at imperdiet. Fusce pharetra cursus arcu sed mattis. Proin luctus congue justo quis tempor. In tempor mattis lorem. Aliquam faucibus cursus dui ut porta. </p>
    </div>
  </body> 
</html>

Result
Big Title Lorem ipsum dolor sit amet, curabitur erat nibh, mollis ut tempor ac, pellentesque eu ante. In elementum, dolor vel accumsan elementum, tellus felis ultricies augue, at accumsan nisl lorem dapibus quam. Proin in leo rhoncus, viverra sem non, placerat purus. Fusce iaculis libero at est varius eleifend. Sed at odio luctus, mattis urna id, porttitor mauris. Nam et magna tincidunt, mattis est ac, tempus enim. In consequat a tellus at imperdiet. Fusce pharetra cursus arcu sed mattis. Proin luctus congue justo quis tempor. In tempor mattis lorem. Aliquam faucibus cursus dui ut porta.

Result

Big Title

Lorem ipsum dolor sit amet, curabitur erat nibh, mollis ut tempor ac, pellentesque eu ante. In elementum, dolor vel accumsan elementum, tellus felis ultricies augue, at accumsan nisl lorem dapibus quam. Proin in leo rhoncus, viverra sem non, placerat purus. Fusce iaculis libero at est varius eleifend. Sed at odio luctus, mattis urna id, porttitor mauris. Nam et magna tincidunt, mattis est ac, tempus enim. In consequat a tellus at imperdiet. Fusce pharetra cursus arcu sed mattis. Proin luctus congue justo quis tempor. In tempor mattis lorem. Aliquam faucibus cursus dui ut porta.