我在添加a 节点后 他的href 值 没有设置javascript:;,然后再删除节点的时候,出现的是全部删除,加了之后,可以删除this.parentNode,这是咋回事

麻烦看看上面是哪里的问题 谢谢,代码在下面!


```html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
        
        li a {
            float: right;
            list-style-type: none;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

        <li>梵蒂冈dsaf f 噶</li>
    </ul>
    <script>
        //获取元素
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //注册事件
        btn.onclick = function() {
            if (text.value == '') {
                text.value = '您输入的有误';
                return false;
            } else {
                var lis = document.createElement('li');
                lis.innerHTML = text.value + '<a href="javascript:;">删除</a>';
                /* ul.appendChild(lis); */
                ul.insertBefore(lis, ul.children[0]);
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>

```

整个href删掉,而不是留空的内容href="",这样是链接,链接地址为空默认访问当前页面,点击后相当刷新页面,刷新了页面后js添加的内容会丢失,所以就出现题主说的全部删除这种效果了
lis.innerHTML = text.value + '<a >删除</a>';//连href一起删掉,而不是lis.innerHTML = text.value + '<a href="">删除</a>';这样

当然保留href=""也行,要return false阻止链接跳转


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

            li a {
                float: right;
                list-style-type: none;
            }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

        <li>梵蒂冈dsaf f 噶</li>
    </ul>
    <script>
        //获取元素
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //注册事件
        btn.onclick = function() {
            if (text.value == '') {
                text.value = '您输入的有误';
                return false;
            } else {
                var lis = document.createElement('li');
                lis.innerHTML = text.value + '<a href="">删除</a>';
                /* ul.appendChild(lis); */
                ul.insertBefore(lis, ul.children[0]);
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                        return false;///////////阻止链接跳转
                    }
                }
            }
        }
    </script>
</body>

</html>

img


有其他问题可以继续交流~

img

正常删除 没看出来什么问题

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632