Lesson 16 Removing Content

JQuery can remove existing contents by removing certain elements.

The remove methods are remove() and empty().

16.1 The remove() Method

The remove() method removes the content of the selected elements and their child elements .

Example 16.1

This example removes the <div> elements and the <ul> elements

<!DOCTYPE html>
<html>
<head>
<script>
 $(document).ready(function(){
     $("#btn1").click(function(){
        $("#div1").remove();
    });
    $("#btn2").click(function(){
        $("ul").remove();
    });
});
</script>
</head>
<body>
<div id="div1" style="height:250px;width:350px;border:1px solid black;background-color:cyan;">
<p> List of fresh products</p>
<ul>
<li>Fruits
<ol>
<li>Apple
<li>Orange
</ol>
<li>Vegetable
<ol>
<li>Cabbage
<li>Brocolli
<ol>
</ul>

</div>
<br>
<button id="btn2">Remove The List</button>
<button id="btn1">Remove All Content</button>
</body>
</html>

List of fresh products

Fruits
1. Apple
2. Orange
Vegetable
1. Cabbge
2. Brocolli

*Refresh the page after clicking a button before you click on the other button

16.2 Removing elements with a Filtering Parameter

The remove() method can also filter elected elements with a parameter . The parameter can be a class or an id

Example 16.2

This example removes the <h2> element with id="mytitle" and the <p> elements with class="para1".

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
          $("h2").remove("#title");
    });
    $("#btn3").click(function(){
           $("p").remove(".para1");
    });
});
</script>
</head>
<body>
<h2 id="mytitle">Removing Content with JQuery</h2>
<p class="para1">JQuery can remove content easily.</p>
<p class="para2">The methods are remove() and empty().</p>
<p class="para1">You can also select content to remove.</p>
<button id="btn3">Remove the Title
<button id="btn4">Remove all p elements with class="para1"</button>

</body>
</html>

Removing Content with JQuery

JQuery can remove content easily.

The methods are remove() and empty().

You can also select content to remove.

Example 16.3

This example demonstrates removing elements by putting different parameters together separated by commas.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
   $("#btn5").click(function(){
           $("p").remove(".para1,.para3,#para4");
    });
});
</script>
</head>
<body>
<p class="para1">JQuery can remove content easily.</p>
<p class="para2">The methods are remove() and empty().</p>
<p class="para3">You can also select content to remove.</p>
<p id="para4">By includng parameneters.</p>
<button id="btn5">Remove all  relevant p elements</button>
</body>
</html>

JQuery can remove content easily.

The methods are remove() and empty().

You can also select content to remove.

By includng parameneters.

16.3 The empty() Method

The empty() method removes the childe elements of the selected elements.

Example 16.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn6").click(function(){
        $("#div2").empty();
    });
});
</script>
</head>
<body>
<div id="div2" class="mydiv">

<h1>The empty() Method</h1>
<p>Another JQuery content removing method.</p>
<p>It is the empty() method.</p>
<img src="https://javascript-tutor.net//jquery/ladybug.gif" style="width:30%;height:auto">

<button id="btn6">Remove the  elements</button>
<div>

</body>
</html>

The empty() Method

Another JQuery content removing method.

It is the empty() method.

❮ Previous Lesson Next Lesson ❯