JQuery Remove Element

With jquery, We can easily remove different HTML elements.

Before reading this post please refer our JQuery Create Element post if you don’t know how to create an element using JQuery.

<!DOCTYPE html>
<html>
<head>
    <title>Errorsea - jquery remove element</title>
</head>
<body>

</body>
</html>

Above structure is the basic HTML structure that contains the head and body. To use jquery in HTML code, we require jquery google CDN in head or body section.

Index

Toggle

Step 1:

First, insert the following CDN into head tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Note: We require above CDN in our code. JQuery CDN requires an active internet connection.

<!DOCTYPE html>
<html>
<head>
    <title>Errorsea - jquery create element</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
</head>
<body>

</body>
</html>

Step 2:

<!DOCTYPE html>
<html>
<head>
    <title>Errorsea - jquery create element</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  //jquery google cdn
</head>
<body>
 <ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ol>
 <button id="remove">Remove</button> 
</body>
</html>

Suppose we have order list and we want to remove list elements from <ol> elements using jquery.

Here, we remove <li> elements using jquery as follows:

<script>
$(document).ready.(function(){
 $("#remove").click(function(){
  $("li").remove();
 });
});
</script>

Explanation:

First-line shows that function will run during loading of the HTML page.
We select button on click using id remove.
We remove all <li> elements from <ol> tag.

Example 1

<!DOCTYPE html>
<html>
<head>
    <title>Errorsea - jquery remove all element</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
 <ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ol>
 <button id="remove">Remove</button> 
 <script>
  $(document).ready(function(){
   $("#remove").click(function(){
    $("li").remove();
   });
  });
 </script>

</body>
</html>

Above code removes all list elements from <ol> tag.

We can also remove only last <li> tag using jquery.

<script>
$(document).ready.(function(){
 $("#remove").click(function(){
  $("li:last").remove();
 });
});
</script>

Explanation:

First-line shows that function will run during loading of the HTML page.
We select button on click using id remove.
We remove last elements from

Example 2

<!DOCTYPE html>
<html>
<head>
    <title>Errorsea - jquery remove last element</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
 <ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ol>
 <button id="remove">Remove</button> 
 <script>
 $(document).ready(function(){
  $("#remove").click(function(){
   $("li:last").remove();
  });
 });
 </script>
</body>
</html>

Yash Panchal

Computer science student, Working as Web Developer and part-time Blogger. Highly interested in AI & ML.