JavaScript свойство parentElement

Определение и применение

JavaScript свойство parentElement объекта Node возвращает элемент, который является родителем данного узла. В том случае, если узел не имеет родителя, или родитель не является элементом, то это свойство вернет значение null. Свойство доступно только для чтения.

Для того, чтобы возвратить узел, который является родительским для этого узла, а не элемент, то Вы можете воспользоваться свойством parentNode.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`parentElement`	Да	Да	Да	Да	Да*	Да

JavaScript синтаксис:

const parentElement = node.parentElement;

node - Node

Спецификация

Document Object Model (DOM) Level 4 (Working Draft)

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства parentElement</title>
	</head>
	<body>
		<div>
			<p onclick = "myFunc(this)">Click me</p> <!-- добавляем атрибут событий onclick -->
		</div>
		<div>
			<p onclick = "myFunc(this)">Click me</p> <!-- добавляем атрибут событий onclick -->
		</div>
		<div>
			<p onclick = "myFunc(this)">Click me</p> <!-- добавляем атрибут событий onclick -->
		</div>
		<script>
	function myFunc(currentElem) {
	  currentElem.parentElement.style.display = "none"; // устанавливаем родительскому элементу текущего элемента значение свойства display равным none
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на определенный HTML элемент <p>, мы вызываем функцию, которая устанавливает родительскому элементу элемента <p>, по которому произошло нажатие, значение CSS свойства display равным none. В результате чего этот элемент будет скрыт.

Результат нашего примера:

Пример использования JavaScript свойства parentElement

JavaScript Node