What is the difference between jQuery.hide() and jQuery.remove() methods in jQuery?

jQueryWeb DevelopmentFront End Technology

jQuery.hide()

If you want to hide an element, then use the hide() method to hide the selected element.

Example

You can try to run the following code to learn how to work with jQuery.hide() method using jQuery:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".button1").click(function(){
        $("p").hide();
    });
    $(".button2").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<button class="button1">Hide the element</button>
<button class="button2">Show the element</button>
<p>This is demo text.</p>

</body>
</html>

jQuery.remove()

The remove() method will remove the selected elements, but it also includes the text and child nodes.

Example

You can try to run the following code to learn how to work with jQuery.remove() method using jQuery:

Live Demo

<html>

   <head>
      <title>jQuery remove() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove().appendTo("#result");
            });
         });
      </script>
       
      <style>
         .div {
             margin:10px;
             padding:12px;
             border:2px solid #666;
             width:60px;
         }
      </style>
   </head>
   
   <body>
   
      <p>Click on any square below to see the result:</p>
      <p id = "result"> THIS IS TEST </p>
      <hr />
       
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
       
   </body>
</html>
raja
Published on 18-Dec-2017 09:54:30
Advertisements