我在添加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>

```

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

3条回答默认最新

CSDN专家-showbo 2022-03-14 12:04

关注

整个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>