微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

我无法将JS removeChild设置为正常工作

分类：编程问答

如何解决我无法将JS removeChild设置为正常工作

抱歉我的愚蠢问题和错误解释

目前，我正在学习JS，不知道出了什么问题。

当我点击按钮时，我试图创建新的

列表，并且我想在点击X时将其删除

它确实可以以某种方式工作，但是仅当P标签中的标签数量超过1个时才有效。因此，不可能删除所有提交的内容

var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");

btn.addEventListener("click",add);

function add(){
    var newP = document.createElement("p");
    var newUl = document.createElement("ul");
    var newLi = document.createElement("li");
    var newText = document.createTextNode(text.value);
    var delbtn = document.createElement("span");
    delbtn.setAttribute("class","del")
    var delText = document.createTextNode("X");
    var delbtns = document.querySelectorAll(".del")
    list.appendChild(newP);
    newP.appendChild(newUl);
    newUl.appendChild(newLi);
    newLi.appendChild(newText);
    newP.appendChild(delbtn);
    delbtn.appendChild(delText);
    text.value = ""
    text.focus();
    
    for (var i = 0; i < delbtns.length; i++){
        delbtns[i].addEventListener("click",function () {
            if(this.parentNode.parentNode)
            this.parentNode.parentNode.removeChild(this.parentNode)
        });
    }
}
<!doctype html>
<html lang="en">
<head>
    <Meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            width: 80%;
        }
        .del{
            border: 1px solid #999;
            display: flex;
            flex-basis: 200;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <form action="">
        <input type="text" id="write" />
        <input type="button" id="submit"/>
    </form>
    <div id="list"></div>
    <script src="index.js"></script>
</body>
</html>

解决方法

您不需要使用for循环添加多个事件，您只需要同时将事件添加到每个添加的按钮中，这是一个有效的代码段

var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");

btn.addEventListener("click",add);

function add(){
    var newP = document.createElement("p");
    var newUl = document.createElement("ul");
    var newLi = document.createElement("li");
    var newText = document.createTextNode(text.value);
    var delbtn = document.createElement("span");
    delbtn.setAttribute("class","del")
    var delText = document.createTextNode("X");
    newP.appendChild(newUl);
    newUl.appendChild(newLi);
    newLi.appendChild(newText);
    newP.appendChild(delbtn);
    delbtn.appendChild(delText);
    list.appendChild(newP);
    text.value = ""
    text.focus();
    delbtn.addEventListener("click",function () {
            if(this.parentNode.parentNode)
            this.parentNode.parentNode.removeChild(this.parentNode)
        });
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            width: 80%;
        }
        .del{
            border: 1px solid #999;
            display: flex;
            flex-basis: 200;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <form action="">
        <input type="text" id="write" />
        <input type="button" value="add" id="submit"/>
    </form>
    <div id="list"></div>
    <script src="index.js"></script>
</body>
</html>

,

每次单击“添加”按钮时，就是将侦听器添加到所有按钮，而不是删除（因为一个按钮有多个侦听器）。

您可以直接在delbtn元素中设置事件处理程序。

delbtn.addEventListener("click",function(e) {
   if (this.parentNode.parentNode)
      this.parentNode.parentNode.removeChild(this.parentNode)
});

工作提琴：https://jsfiddle.net/mrlew/g1fckz6t/3/

,

您通过循环不断冒泡事件，这是第一个错误。创建新项目时，您需要一次将事件侦听器添加到其中。如果您使用开发工具检查结构，则会在一个项目上看到几个相同的事件。

创建元素后，SO仅定位到最后一个：

document.querySelector("#list > p:last-of-type > span.del:last-of-type").addEventListener("click",function () {
        if(this.parentNode.parentNode)
        this.parentNode.parentNode.removeChild(this.parentNode)
    });

示例： 

var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");

btn.addEventListener("click","del")
    var delText = document.createTextNode("X");
    var delbtns = document.querySelectorAll(".del")
    list.appendChild(newP);
    newP.appendChild(newUl);
    newUl.appendChild(newLi);
    newLi.appendChild(newText);
    newP.appendChild(delbtn);
    delbtn.appendChild(delText);
    text.value = ""
    text.focus();
    
    document.querySelector("#list > p:last-of-type > span.del:last-of-type").addEventListener("click",function () {
            if(this.parentNode.parentNode)
            this.parentNode.parentNode.removeChild(this.parentNode)
        });
 
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            width: 80%;
        }
        .del{
            border: 1px solid #999;
            display: flex;
            flex-basis: 200;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <form action="">
        <input type="text" id="write" />
        <input type="button" id="submit"/>
    </form>
    <div id="list"></div>
    <script src="index.js"></script>
</body>
</html>

请注意，您正在创建新的段落，其中的列表只有一个项目。不确定是故意的，但不是HTML列表应如何工作。您应该有ul元素，其中包含更多li's ...

,

我在此答案中使用了闭包的功能，如果您想了解此答案，则需要先了解javascript闭包。 

const input = document.querySelector('#input');
                const btn = document.querySelector('#btn');
                
                function add() {
                    const inputVal = input.value;
                    input.value = '';
                    const ul = document.createElement('ul');
                    const li = document.createElement('li');
                    const p = document.createElement('p');
                    p.textContent = inputVal;
                    const deleteBtn = document.createElement('button');
                    deleteBtn.textContent = 'delete';
                    document.body.appendChild(ul);
                    ul.appendChild(li);
                    li.appendChild(p);
                    li.appendChild(deleteBtn);
                    deleteBtn.addEventListener('click',() => {
                        li.remove();
                    });
                };
                btn.addEventListener('click',add);
<input type="text" id="input" />
            <button id="btn">submit</button>

,

我的方法是不打架浏览器，不要循环太多。 首先，放弃传统的方法，即通过DOM迭代以找到父项，然后尝试找到子项，然后将其删除。

有一种简单的方法可以进行事件委托。

您正在以任何方式动态创建节点。做得好。 只需向其添加onclick事件侦听器并触发element.remove()函数。是的，这是正确的新方法。

在我的示例中，我已将其替换为this.parentElement.remove()，因此它删除了发生事件的元素。

一旦创建了节点并同时注册了事件，便不再需要为之​​烦恼。

创建了一个p元素 为X创建了span元素 用文本字段的值更新P元素的innerHTMl，然后将span元素作为子元素添加。 然后，最后将P元素添加到列表div中。 单击X时，它会删除P元素及其所有内容。

 <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            p{
                width: 80%;
            }
            .del{
                border: 1px solid #999;
                display: flex;
                flex-basis: 200;
            }
        </style>
    </head>
    <body>
        <h1>hello world</h1>
        <form action="">
            <input type="text" id="write" />
            <input type="button" onclick="add()" value="add" id="submit"/>
        </form>
        <div id="list"></div>
    <script>

    function add(){
    var mylist = document.getElementById("list");
    var p = document.createElement("P");
    var span = document.createElement("SPAN");
    span.innerHTML ='\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'X'; 
span.onclick = function () {
        this.parentElement.remove();
    }; 
    p.innerHTML = document.getElementById("write").value; 
        p.appendChild(span); 
    
    mylist.appendChild(p); 

    }

    </script>
    </body>
    </html>

添加了注释：无需库即可使用。 除了一堆HTML外，没有太多笨拙的JS代码。保持简单，并使用浏览器的功能并与之一起扩展设计。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot