Explanation of JQuery Remove Element with Example.

Posted by

It is easy to remove existing HTML elements.

Remove Elements/Content

To remove elements and content, there are mainly two jQuery methods:

  • remove() – Removes the selected element (and its child elements).
  • empty() – Removes the child elements from the selected element.

jQuery remove() Method

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

Example :-

<script>

$(document).ready(function(){

$(“.btn-one”).click(function(){

$(“p”).remove();

});

});

</script>

<body>

<p >This is Roshan Kumar Jha</p>

<button type=”button” class=”btn-one” >click</button>

</body>

jQuery empty() Method

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

Example :-

<script>

$(document).ready(function(){

$(“.btn-one”).click(function(){

$(“#rk”).empty();

});

});

</script>

<body>

<div id = “rk” style = “height :100px; width:100px; border: 1px solid black;”>

<p>This is some text in the div.</p>

<p >This is Roshan Kumar Jha</p>

</div>

<br>

<button type=”button” class=”btn-one” >click</button>

</body>