Jquery .remove() Function Example

Jquery .remove() Function Example

By Yashwant Chavan, Views 1069, Date 06-Jul-2015

Today we are going to learn about Jquery .remove() Function. This manipulation DOM removal function is used to remove the set of matched elements from the DOM elements.

tags jquery jquery-manipulation dom-removal

Jquery .remove() Syntax and Examples

.remove();
.remove(selector);

Jquery .remove() function is used to remove the set of matched elements from the DOM elements. Refer below examples which will help you to how to use jQuery .remove() function.

$(this).remove();
$("p").remove();
$("li").remove(".active");
$( "li" ).remove( ":contains('Jquery')" );
  • In first example it simply removes the current (this) element.
  • In second example It removes all the p tag elements from DOM.
  • In third example it removes all li elements having class name as "active"
  • last example it removes all li elements from DOM structure which contains word "Jquery".

Jquery .remove() Demo Example

There are couple of ways to use Jquery .remove() function, In below example I have used .remove() function on current (this) object.

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
      <script>
         $(document).ready(function(){      
          $(".box").click(function(){  
           $(this).remove();
          });
         });  
          
      </script>   
   </head>
   <style>
      .box{  
      height:100px;
      width:100px;  
      padding:10px;
      margin:10px;
      float:left;
      display:inline-block;  
      }
      .red{
      background:red;  
      }
      .blue{
      background:blue;  
      }
      .green{
      background:green;  
      }
   </style>
   <body>
      <h1>Jquery .remove() function Example</h1>
      <p>Note:- Click on each div</p>
      <div id="container">
         <div class="box red"></div>
         <div class="box blue"></div>
         <div class="box green"></div>
      </div>
      <br>
      <h2 id="output"> </h2>
   </body>
</html>

Output

jquery .remove() function example
Yashwant

Yashwant

Hi there! I am founder of technicalkeeda.com and programming enthusiast. My skills includes Java,J2EE, Spring Framework, Nodejs, PHP and lot more. If you have any idea that you would want me to develop? Lets connect: yashwantchavan[at][gmail.com]