How to remove or delete HTML element using Javascript

Follow us

In this article, we are going to learn how to remove the HTML element in Javascript.

When removing the HTML element from DOM, there are two approaches you can use.
  1. remove()
  2. removeChild()
Using remove():

Example:

<p id="para"> Hello There </p>

Suppose we want to remove the above element. You can do this by remove().
Like this,

var paraEle = document.getElementById('para');
para.remove();
            <div id="myCol">
                <button onclick="removeParagraphUsingJavaScript()">Remove Paragraph (p element) using Javascript</button>     
                <p id="para"> This is an example of removing the element using javascript</p>
            </div>
			<script>
              function removeParagraphUsingJavaScript(){
                  var para = document.getElementById('para');
                  if(para != undefined){
                      para.remove();    
                  }
              }
    	   </script>
      
Using removeChild():

Example:
Here using the removeChild() simply removes the child element.

<p id="para"> Hello There </p>

Like this,

var paraEle = document.getElementById('para');
paraEle.parentNode.removeChild(para);
            <div id="myCol">
                <button onclick="removeParagraphUsingJavaScript()">Remove Paragraph (p element) using Javascript</button>     
                <p id="para"> This is an example of removing the element using javascript</p>
            </div>
			<script>
              function removeParagraphUsingJavaScript(){
                  var para = document.getElementById('para');
                  if(para != undefined){
					para.parentNode.removeChild(para);   
                  }
              }
    	   </script>
      

An important thing to keep in mind while doing remove operation. It will throw an error if the element does not exist and you are trying to remove it. It’s best practice to first check if the element does exist or not.

You can check this out here.

Example:

if(para != undefined){
//your code goes here 
}

Now let’s see how jQuery helps to remove the element.
There are two main methods for removing the element:

  1. remove() – It removes the selected element and its child elements.
  2. empty() – It removes the child elements from selected element.
Using jQuery remove() method:

Example :

<p id="para">
    <li class="list">Item 1</li>
    <li class="list"> Item 2</li>
</p> 
$('#para').remove();

This removes the element. If you want to filter or just want to remove the particular elements using selector then you can do with it –

$('li').remove('.list');
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Javascript Example</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function removeParagraphUsingJQuery(){
            if($('#para') != undefined){
				$('#para').remove();  
            }
        }
      function removeParticularElementUsingJQuery(){
		$('li').remove('.list');  
      }
    </script>
</head>
<body>
    <div class="container">
        <div class="row m-2 text-center">
            <div class="col-lg-3" id="myCol">
                <button onclick="removeParagraphUsingJQuery()">Remove Paragraph (p element) using JQuery</button>
                <button onclick="removeParticularElementUsingJQuery()">Remove particular child element of parent node using JQuery</button>
              	<p id="para"> This is an example of removing the element using javascript</p>
				<li class="list">Item 1</li>
				<li class="list"> Item 2</li>
            </div>
        </div>
    </div>   
</body>
</html>
Using jQuery empty() method:

Example :

<p id="para">
    <li class="list">Item 1</li>
    <li class="listItem"> Item 2</li>
</p> 
$('#para').empty();
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Javascript Example</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function removeParagraphUsingJQuery(){
            if($('#para') != undefined){
				$('#para').empty();  
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="row m-2 text-center">
            <div class="col-lg-3" id="myCol">
                <button onclick="removeParagraphUsingJQuery()">Remove Paragraph (p element) using JQuery</button>
                <p id="para">
				    This is paragraph
				</p>
            </div>
        </div>
    </div>   
</body>
</html>

This empty() method will wipe out all the content holding in the element. It empties the element of everything

Leave a Comment

Your email address will not be published. Required fields are marked *