Video tutorial to illustrate adding or appending an html element or removing an html element from the web page using jQuery: DOM (Document Object Model)
jQuery uses: .append(); and .remove(); functions to accomplish this task.
We could use these methods to append string or any other html or XML element and also remove string and other html or XML elements from the document.
In this example, we are illustrating with the help of an ordered list, by adding and removing its list items.
HTML code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html>
<head><title>Add/Append and Remove Elements!</title></head>
<body>
<ol>
<li></li>
<li></li>
</ol>
<button id="add_li">Add List</button>
<button id="remove_li">Remove List</button>
<script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>
</body>
</html> |
Here we have two list items and two buttons.
Buttons have unique id’s: add_li, remove_li Clicking on which the list items get added and removed respectively.
jQuery code
my_script.js
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready( function() {
$("#add_li").click( function() {
$("ol").append("<li></li>");
});
$("#remove_li").click( function() {
$("li:last").remove();
});
}); |
Once the document is loaded and the user clicks on Add List button, the list item gets added.
Once the document is loaded and the user clicks on Remove List button, the list item gets deleted.
1 | $("ol").append("<li></li>"); |
Here li tag gets appended to ol tag.
1 | $("li:last").remove(); |
First select the element to be removed, and then call remove() method.
Here, we select the last list item in the ordered list and then invoke remove method, which removes li one at a time in reverse order.
Video Tutorial: Append/Add and Remove HTML Elements: jQuery
[youtube https://www.youtube.com/watch?v=jexv6AfI2lE]
If we select li and apply remove() method on it, it would remove all the list items from the document. So we need to specify the list item to be removed. In our case, we are interested in removing the last list item from the ordered list.
1 | $("li").remove(); |
Using append() and remove() methods, try to append and remove string and other html and xml elements from the document.
You could do the same on XML documents too.
Also Learn:
XML Tutorials