jQuery Add and Remove Methods
What are jQuery Add and Remove Methods?
jQuery provides methods to add or remove elements, classes, and attributes dynamically.
These methods help in modifying webpage content without reloading the page.
Why Use jQuery Add and Remove Methods?
✅ Modify elements in real-time – Dynamically add or remove content.
✅ Short and simple syntax – Easier than plain JavaScript.
✅ Improve user experience – Modify layouts dynamically.
jQuery Add Methods
| Method | Description |
|---|---|
| append() | Adds content inside an element (at the end). |
| prepend() | Adds content inside an element (at the beginning). |
| after() | Adds content after the selected element. |
| before() | Adds content before the selected element. |
| addClass() | Adds one or more classes to an element. |
| attr() | Adds or updates an attribute to an element. |
1. Add Content Inside an Element – append() & prepend()
👉 Example: Add text at the end and beginning of a paragraph.
$(“#appendBtn”).click(function() {
$(“#para”).append(” <b>This is added at the end.</b>”);
});
$(“#prependBtn”).click(function() {
$(“#para”).prepend(“<b>This is added at the beginning. </b>”);
});
📌 What happens?
• Clicking “Append” adds text at the end of the paragraph.
• Clicking “Prepend” adds text at the beginning.
2. Add Content Outside an Element – after() & before()
👉 Example: Add a new paragraph before and after an existing one.
$(“#afterBtn”).click(function() {
$(“#para”).after(“<p>This is a new paragraph added after.</p>”);
});
$(“#beforeBtn”).click(function() {
$(“#para”).before(“<p>This is a new paragraph added before.</p>”);
});
📌 What happens?
• Clicking “After” adds a new paragraph after the existing one.
• Clicking “Before” adds a new paragraph before the existing one.
3. Add a Class to an Element – addClass()
👉 Example: Add a highlight class to a paragraph.
$(“#addClassBtn”).click(function() {
$(“#para”).addClass(“highlight”);
});
📌 What happens?
• Clicking the button adds the class, changing the background color.
jQuery Remove Methods
| Method | Description |
|---|---|
| remove() | Removes the selected element completely. |
| empty() | Removes all content inside an element, but keeps the element. |
| removeClass() | Removes one or more classes from an element. |
| removeAttr() | Removes an attribute from an element. |
1. Remove an Element – remove()
👉 Example: Remove a paragraph when a button is clicked.
$(“#removeBtn”).click(function() {
$(“#para”).remove();
});
📌 What happens?
• Clicking the button removes the paragraph completely from the page
2. Remove Only the Content – empty()
👉 Example: Keep the div, but remove its content.
$(“#emptyBtn”).click(function() {
$(“#contentBox”).empty();
});
📌 What happens?
• Clicking the button removes everything inside the div, but keeps the box.
3. Remove a Class from an Element – removeClass()
👉 Example: Remove the highlight class from a paragraph.
$(“#removeClassBtn”).click(function() {
$(“#para”).removeClass(“highlight”);
});
📌 What happens?
• Clicking the button removes the highlight effect from the paragraph.
4. Remove an Attribute – removeAttr()
👉 Example: Remove the href attribute from a link.
$(“#removeAttrBtn”).click(function() {
$(“#myLink”).removeAttr(“href”);
});
📌 What happens?
• Clicking the button removes the link functionality, making it unclickable.
Conclusion
🎯 append(), prepend(), after(), before() add content dynamically.
🎯 remove(), empty() delete elements or content.
🎯 addClass(), removeClass() toggle styles dynamically.
🎯 removeAttr() removes attributes like href and src.
