JavaScript / jQuery HTML DOM
jQuery vs JavaScript
jQuery is a tool made by John Resig in 2006. Its purpose is to manage differences among browsers and make it easier to handle tasks like changing HTML content, dealing with events, creating animations, and using Ajax.
For over a decade, jQuery has been the most widely used JavaScript library globally.
Since JavaScript Version 5 (2009), many jQuery functions can now be replaced with just a few lines of regular JavaScript code.
Removing HTML Elements
Delete an HTML element:
Get Parent Element
Retrieve the HTML element's parent.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Remove an HTML Element</h2>
<p id="id01">Hello World!</p>
<p id="id02">Hello Sweden!</p>
<script>
$(document).ready(function() {
$("#id02").remove();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Remove an HTML Element</h2>
<p id="id01">Hello World!</p>
<p id="id02">Hello Sweden!</p>
<script>
document.getElementById("id02").remove();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Getting Parent HTML Element</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
$("#demo").text($("#02").parent().prop("nodeName"));
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Get Parent HTML Element</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.getElementById("02").parentNode.nodeName;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery