jQuery Remove Elements Using remove(), empty(), unwrap()

jQuery remove elements using empty(), remove(), unwrap() Method – how to use this method for remove selected html elements. Here, You will learn how to remove the selected HTML elements or its contents using jQuery. Also remove its attribute to the document.

jQuery Remove Element Methods

There are three types of method available to remove the element or content, we can use these methods to remove the element or content.

  • empty() method
  • remove() method
  • unwrap() method

jQuery empty() Method

Using the jQuery empty () method can remove all child nodes or elements and content from selected HTML elements.

Syntax

$(selector).empty();

Example of jQuery empty() method

You can see that example of the empty() method, the following example will remove all the contents inside the elements with the class on the click of the button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
    padding: 15px;
    background: #1EBBA3;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_empty").click(function(){
       $("#contents").empty();
    });
});
</script>
</head>
<body>
    <div id="contents" class="container">
        <h1>Hello World!</h1>
        <p class="hint"><strong>Note:</strong> If you click the following button it will remove all the contents of the container div including the button.</p>
        <button type="button" id="btn_empty">Click Here</button>
    </div>
</body>
</html>                            

Output

Removing all the Contents using empty() jQuery

Hello World!

Note: If you click the following button it will remove all the contents of the container div including the button.

jQuery remove Method

Using the jQuery remove () method can remove the selected html elements from the DOM as well as everything inside it. This method also removes the data and events of the selected elements.

Syntax

$(selector).remove(selector);

Parameters of remove() method

ParameterDescription
Selectoris an optional parameter. It specifies whether to remove one or more elements. If you have to remove more than one element then you should separate them with comma (,).

Example of jQuery remove() method

You can see that example of the remove() method, the following example will remove the selected paragraph.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
    padding: 15px;
    background: #1EBBA3;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_remove").click(function(){
       $("#con_div").remove();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <p id="con_div"><strong>Note:</strong> If you click the following button it will remove this paragraph</p>
        <button type="button" id="btn_remove">Click Here</button>
    </div>
</body>
</html>                            

Output

Removing all the Contents using empty() jQuery

Hello World!

Note: If you click the following button it will remove this paragraph

jQuery unwrap()

Using the jQuery unwrap() method can remove the parent element of the selected elements.

Syntax

$(selector).unwrap(); 

Example of jQuery unwrap() method

You can see that the unwrap() method, the following example will remove the original element of
elements on the button click.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing all the Contents using empty() jQuery</title>
<style type="text/css">
.container{
    padding: 15px;
    background: #1EBBA3;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_wrap").click(function(){
       $("#con_wrap").unwrap();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <p id="con_wrap"><strong>Note:</strong> If you click the following button it will remove the parent element of this paragraph.</p>
        <button type="button" id="btn_wrap">Click Here</button>
    </div>
</body>
</html>                            

Output

Removing all the Contents using empty() jQuery

Hello World!

Note: If you click the following button it will remove the parent element of this paragraph.

Spread the love

Be First to Comment

Leave a Reply

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