What is the difference between remove() and empty() in jQuery?

jQuery remove() Method:

The jQuery remove() method removes the selected element(s) and its child elements.

Example:

<script>

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

</script>

<body>

<div id="div1">

This is some text in the div.

<p>This is a paragraph in the div.</p>

<p>This is another paragraph in the div.</p>

</div>

<br>

<button>Remove div element</button>

</body>

In this example, on clicking button, div and paragraph both will be removed.

 jQuery empty() Method:

The jQuery empty() method removes the child elements of the selected element(s).

Example:

<script>

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").empty();
    });

});

</script>

<body>

<div id="div1">

This is some text in the div.

<p>This is a paragraph in the div.</p>

<p>This is another paragraph in the div.</p>

</div>

<br>

<button>Empty the div element</button>

</body>

In this example, on clicking button, only paragraph will be removed. 

Posted on by