ChatGPT помог мне. Оказывается надо было всего лишь добавить в конце true, чтобы обработчик сначала начал обрабатывать вложенные элементы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blur</title>
</head>
<body>
<ul id="list">
<li class="item"><textarea placeholder="Введите здесь текст"></textarea>
<li class="item"><textarea placeholder="Введите здесь текст"></textarea>
</ul>
<script>
const list = document.getElementById('list');
// при вводе в textarea события ввода отслеживаются
list.addEventListener('input', function(event) {
console.log('Input works');
let target = event.target;
})
// но когда надо отследить Blur — ничего не работает :(((
list.addEventListener('blur', function(event) {
console.log('Blur works?');
let target = event.target;
// после расфокусировки почистить textarea от лишних пробелов и переносов
target.value = target.value.trim();
let listItem = target.closest('.item');
// если после расфокусировки textarea пустой — удалить блок с ним
if(target.value === '') listItem.remove();
// вот здесь надо было поставить true
}, true)
</script>
</body>
</html>