Надо чтоб после события blur скрипт очистил textarea с помощью trim() и если он в итоге оказался пустым — вообще удалить блок с ним.
У меня работает с событием 'input', а вот 'blur' он почему-то не видит... Объясните в чём причина и как заставить код работать?
<!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();
})
</script>
</body>
</html>
Вообще не понимаю как так... Какова же причина?