JQuery DOM

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