Как определить тип элемента при нажатии на крестик

В этой статье мы подробно разберём:

Что такое «крестик» в контексте веб‑интерфейса.
Какие существуют способы определить тип элемента в DOM.
Как связать проверку с нажатием на крестик.
Примеры кода на чистом JavaScript и на jQuery.
Типичные ошибки и рекомендации по безопасности.

Почему проверка типа элемента важна?

Проверка типа элемента позволяет:

Избежать случайного удаления или изменения неверного узла.
Сделать интерфейс более предсказуемым для пользователя.
Обеспечить корректную работу скриптов, которые работают только с <div>.

Что такое «крестик»?

«Крестик» – это обычно небольшая иконка (символ ✖ или ×), размещаемая рядом с элементом и служащая для:

Удаления элемента.
Скрытия/показа дополнительного контента.
Запуска проверки или подтверждения действия.

Для нашего примера крестик будет простым <span> с классом .cross:

<div class="item">
 Текстовый блок
 <span class="cross">✖</span>
</div>

Как определить, что элемент – именно `<div>`?

В JavaScript у каждого узла есть свойство nodeName (в верхнем регистре) и tagName. Чтобы проверить, является ли элемент div, достаточно сравнить эти свойства с строкой "DIV":

function isDiv(element) {
 return element && element.nodeName === "DIV";
}

Если вы используете jQuery, то можно воспользоваться методом .is:

function isDivJQ($el) {
 return $el.is("div");
}

Связывание проверки с нажатием на крестик

4.1 Чистый JavaScript

Ниже пример полной разметки и скрипта, который:

Отслеживает клик по любому элементу с классом .cross.
Находит ближайший родительский элемент, который потенциально может быть div.

<div class=»item»>
Это первый DIV
<span class=»cross»>✖</span>
</div>

<section class=»item»>
Это SECTION, а не DIV
<span class=»cross»>✖</span>
</section>

// Выполняем проверку
var result = isDiv(parent) ? «Это DIV» : «Это НЕ DIV»;

console.log(result);

// И показываем пользователю (создаём/обновляем блок .result)
var resBlock = parent.querySelector(‘.result’);
if (!resBlock) {
resBlock = document.createElement(‘div’);
resBlock.className = ‘result’;
parent.appendChild(resBlock);
}
resBlock.textContent = result;
}
});

function isDiv(el) {
return el && el.nodeName === «DIV»;
}
</script>

4.2 jQuery‑вариант

Если ваш проект уже использует jQuery, код будет чуть короче:

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
$(document).on('click', '.cross', function {
 var $parent = $(this).parent; // ближайший родитель
 var isDiv = $parent.is('div');
 var result = isDiv ? 'Это DIV' : 'Это НЕ DIV';

 console.log(result);

 // Показ результата
 var $res = $parent.find('.result');
 if ($res.length === 0) {
 $res = $('').appendTo($parent);
 }
 $res.text(result);
});
</script>

Полезные приёмы и рекомендации

5.1 Делегирование событий

В примерах выше используется делегирование (document.addEventListener или $(document).on). Это позволяет обрабатывать клики по элементам, которые могут быть добавлены в DOM динамически, без необходимости пере‑привязывать обработчики.

5.2 Защита от «клик‑по‑пустоте»

Всегда проверяйте, что event.target действительно является элементом‑крестиком, а не его дочерним элементом (например, если внутри span будет svg). Можно использовать closest:

var cross = event.target.closest('.cross');
if (!cross) return; // клик не по крестику

5.3 Универсальная проверка типа

Если вам нужно проверять не только div, а любой тег, создайте небольшую утилиту:

function isTag(el, tagName) {
 return el && el.nodeName === tagName.toUpperCase;
}

5.4 Обработка вложенных структур

Иногда крестик может находиться внутри вложенных элементов (например, <div><section><span class="cross">). В таком случае ищем нужный родитель с помощью closest:

var $targetDiv = $(this).closest('div');
if ($targetDiv.length) {
 // нашли ближайший DIV
}

Типичные ошибки

Сравнение с маленьким регистром. Свойство nodeName всегда возвращает заглавные буквы, поэтому сравнивать нужно с "DIV", а не "div".
Проверка самого крестика. Часто новички проверяют event.target.nodeName === "DIV", но event.target – это сам span, а не его родитель.
Отсутствие делегирования. При динамическом добавлении новых элементов без пере‑привязки обработчиков проверка перестаёт работать.
Не учитывается documentFragment. Если элемент создаётся в DocumentFragment и потом вставляется, убедитесь, что проверка происходит уже после вставки в DOM.

Полный рабочий пример

<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Проверка DIV с крестиком</title>
<style>
.item {border: 1px solid #ccc; padding: 10px; margin: 10px 0; position: relative;}
.cross {position: absolute; top: 5px; right: 5px; cursor: pointer; color: #c00;}
.result {margin-top: 8px; color: #006400;}
</style>
</head>
<body>

<section class=»item»>
Это SECTION‑блок
<span class=»cross»>✖</span>
</section>

var parent = cross.parentElement; // ближайший родитель
var isDiv = parent && parent.nodeName === ‘DIV’;
var text = isDiv ? ‘Это DIV’ : ‘Это НЕ DIV’;

// выводим результат
var res = parent.querySelector(‘.result’);
if (!res) {
res = document.createElement(‘div’);
res.className = ‘result’;
parent.appendChild(res);
}
res.textContent = text;
});
</script>

</body>

Проверка типа элемента с помощью «крестика» – простая, но часто используемая техника в интерактивных веб‑приложениях. Главное помнить:

Использовать nodeName (или .is в jQuery) для надёжного сравнения.
Применять делегирование событий, чтобы поддерживать динамический контент.
Обрабатывать вложенные структуры через closest.
Тестировать на разных браузерах и учитывать регистр тегов.

Следуя рекомендациям из этой статьи, вы сможете безошибочно определять, является ли родительский элемент div, и выполнять нужные действия (удаление, скрытие, подтверждение) по нажатию на крестик.