主页 / 问题 / 1213644
Accepted
Krovorgen
Asked:2021-12-04 00:35:27 +0000 UTC2021-12-04 00:35:27 +0000 UTC

不使用 JS 在 HTML 页面中删除 <p>

  • 772

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 变为 > 5，则无法从 div 中删除 p。可能是子节点的错误实现。

javascript

2 个回答

  1. childNodes也包括文本节点（包括页面上不可见的标记中的空格和换行符），而不仅仅是元素。因此，if (div.childNodes.length > 7)当您仅添加两个元素时，条件已经满足p- 因为对于文本节点，该元素div在一开始就已经包含 5 个子节点（两个元素和三个文本节点）。因此，它div.childNodes[2].remove();删除的不是第一个元素p，而是 之后的所有内容，首先是andinput之间的文本节点，然后是按钮。inputbutton

    • 2
  2. Best Answer
    const ps = div.querySelectorAll('p');
if (ps.length > 7) {
    ps[2].remove();
}
    • 2

相关问题