How to remove contents of elements using jQuery ?
In this article, we will discuss how to remove the contents of the elements using jQuery. To remove the contents of elements, we will use the empty() method and the remove() method.
The jQuery empty() method is used to remove all child nodes and their content for the selected elements. This method does not accept any parameter.
Syntax:
$(selector).empty()
Approach: In this article, first we create a div container with .main class that contains two other div elements. Also, we have created an input button element and when the user clicks on that button, the empty() method is called and it removes all child nodes and their contents.
Example: In this example, we will use the empty() method.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < script src = "https://code.jquery.com/jquery-3.5.1.min.js" > </ script > < style > .main { width: 450px; text-align: justify; font-size: 18px; } #GFG { padding: 5px 15px; margin-top: 20px; } </ style > < script > $(document).ready(function () { $("#GFG").on('click', function () { $(".main").empty(); }) }); </ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > How to remove the contents of the elements using jQuery? </ h3 > < div class = "main" > < div class = "section1" > HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. </ div > < div class = "section2" > Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages. </ div > </ div > < input type = "button" id = "GFG" value = "Remove Contents" > </ center > </ body > </ html > |
Output:
The remove() method in JQuery is used to remove all the selected elements including all the text. This method also removes data and all the events of the selected elements.
Syntax:
$(selector).remove()
Example: In this example, we will use the remove() method.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < script src = "https://code.jquery.com/jquery-3.5.1.min.js" > </ script > < style > .main { width: 450px; text-align: justify; font-size: 18px; } #GFG { padding: 5px 15px; margin-top: 20px; } </ style > < script > $(document).ready(function () { $("#GFG").on('click', function () { $(".main").remove(); }) }); </ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > How to remove the contents of the elements using jQuery? </ h3 > < div class = "main" > < div class = "section1" > HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. </ div > < div class = "section2" > Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages. </ div > </ div > < input type = "button" id = "GFG" value = "Remove Contents" > </ center > </ body > </ html > |
Output:
Contact Us