JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JQuery DOM
Removing HTML Elements
jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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>
Output
Remove an HTML Element
Hello World!
Hello Sweden!
JavaScript
<!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>
Output
Remove an HTML Element
Hello World!
Hello Sweden!
Get Parent Element
Return the parent of an HTML element.
jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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>
Output
Getting Parent HTML Element
Hello World!
Hello Sweden!
BODY
JavaScript
Example
<!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>
Output
Get Parent HTML Element
Hello World!
Hello Sweden!
BODY