Не удаляется
на странице HTML с помощью JS
const shadowButton = () => {
const button = document.querySelector('.button');
const input = document.querySelector('.input');
button.hidden = true;
input.addEventListener("input", function () {
button.hidden = !this.value.length;
});
};
shadowButton();
const addParagraph = () => {
const input = document.querySelector('.input');
const paragraph = document.createElement('p');
paragraph.innerText = input.value;
const div = document.querySelector('.divshadow');
div.append(paragraph);
if (div.childNodes.length > 7) {
div.childNodes[2].remove();
}
};<div class="divshadow">
<input class="input" type="text">
<button onclick="addParagraph()" class="button">Click</button>
</div>Не получается удалить p из div, если p становится > 5. Возможно не правильная реализация childNodes.
Ответы (2 шт):
Автор решения: vsemozhebuty
→ Ссылка
childNodes включает и текстовые узлы тоже (включая пробелы и переводы строки в разметке, невидимые на странице), не только элементы. Так что условие if (div.childNodes.length > 7) выполняется уже тогда, когда вы добавите всего два элемента p — потому что с текстовыми узлами элемент div уже содержит 5 childNodes в самом начале (два элемента и три текстовых узла). Поэтому же div.childNodes[2].remove(); удаляет не первый элемент p, а всё, что находится после input, — сначала текстовый узел между input и button, потом кнопку.
Автор решения: Igor
→ Ссылка
const ps = div.querySelectorAll('p');
if (ps.length > 7) {
ps[2].remove();
}