JQuery Remove Elements

The last article explained how to add html content at different locations within the html document using JQuery. This article focuses on the removing the elements from the html document. JQuery remove function is used to remove html elements from the document. The remove() function is called on the element that is selected via factory method and that is to be remove from the document. You can also pass the class or id of the element to remove from the document as parameter.

Remove Elements by name

To remove elements by name, simply pass the name of the elements to remove. For instance if you want to remove all

elements from the page, use $(‘p’)remove() function. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Remove</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("#b1").click(function(){

           $('p').remove();
            
         });
  
         });
      </script>
     
   
</head>
    
<body>

    
      <button id="b1">Click to Remove Paragraphs.</button>
    
    <p>This is a random paragraph</p>
    
    <p>This is a another random paragraph</p>
    
    <p>This is third random paragraph</p>
    
    <p>This is fourth random paragraph</p>
    
    
    
</body>

</html>

Download Code
Run Code

The above webpage contains a button and four paragraphs. Clicking the button fires an event which is handled by JQuery click event handler. Inside the event handler, the remove method is used to remove all the paragraphs from the page.

Remove Elements by Class and ID

Pass the name of the class or id as a parameter to the remove function if you want to remove element by class and id. For instance if you want to remove all the paragraphs with class red and id blue you can do so by using $(‘p’)remove(‘.red, #blue’). Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Remove</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("#b1").click(function(){

           $('p').remove('.red, #blue');
            
         });
  
         });
      </script>
     
   
</head>
    
<body>

    
      <button id="b1">Click to Remove Paragraphs.</button>
    
    <p class="red">This is a random paragraph</p>
    
    <p>This is a another random paragraph</p>
    
    <p id="blue">This is third random paragraph</p>
    
    <p>This is fourth random paragraph</p>
    
    
    
</body>

</html>

Download Code
Run Code

In the above webpage the first paragraph has class blue while third paragraph has id red. In our script we have specified that remove any paragraph with class blue and id red. Therefore, if clicking the button will remove first and third paragraph and only second and fourth paragraphs will remain on webpage.

<<< JQuery Add FunctionsJQuery Ancestor Traversing >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .