jQuery Remove

/

In this tutorial you will learn how to use jQuery Remove property to remove the HTML elements or its contents as well as its attribute from the document using jQuery.

jQuery Remove Elements or Contents

jQuery provides handful of methods, such as empty(), remove(), unwrap() etc. to remove existing HTML elements or contents from the document.

jQuery empty() Method

The jQuery empty() method removes all child elements as well as other descendant elements and the text content within the selected elements from the DOM.

The following example will remove all the content inside of the elements with the class'container' on click of the button.

Try it

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing the Contents of the Elements in jQuery</title>
<style type="text/css">
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Empty container div on button click
    $("button").click(function(){
       $(".container").empty();
    });
});
</script>
</head>
<body>
    <div 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">Empty Container</button>
    </div>
</body>
</html>

jQuery remove() Method

The jQuery remove() method removes the selected elements from the DOM as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

The following example will remove all the <p> elements with the class 'hint' from the DOM on button click. Nested elements inside these paragraphs will be removed, too.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing the Elements || techTutorialsOnline</title>
<style type="text/css">
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
       $("p.dcs").remove();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>techTutorialsOnline!</h1>
        <p class="dcs">Click the following button to remove me.</p>
        <button type="button">Click me</button>
    </div>
</body>
</html>

jQuery unwrap() Method (Removing parent)

The jQuery unwrap() method removes the parent elements of the selected elements from the DOM. This is typically the inverse of the wrap() method.

The following example will remove the parent element of <p> elements on button click.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing the Parents of the Elements || techTutorialsOnline</title>
<style type="text/css">
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    $(".dcs_button").click(function(){
       $("p").unwrap();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>techTutorialsOnline!</h1>
        <p class="hint">Click the following to remove our parent div.</p>
        <button class="dcs_button">Remove Parent Div</button>
    </div>
</body>
</html>

jQuery removeAttr() Method

The jQuery removeAttr() method removes an attribute from the selected elements.

The example below will remove the 'href' attribute form the <a> elements on button click.