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

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

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(2条)

报告相同问题？

关注问题

jq,点击相同div,子节点添加或删除class javascript jquery
2017-09-06 03:03

回答 4 已采纳 svg用children选不出来，不懂是不是bug，find就行，样式用attr，remove/addClass也无效 ``` $(".paylist-item").cl
Jquery删除并向li节点添加活动类并使用preventDefault发出问题 javascript jquery php
2012-05-21 19:38

回答 5 已采纳 I ended up doing it in PHP like this: <?php //grab the current page name to use in the $path =
这里为什么我在网页弹不出来，是我js里面写错了吗？详解必采纳。这里难道不应该弹出一个警告框 <li><a href="#">99元抢大平板</a></li>吗？我显示不出来 javascript
2022-12-12 22:31

回答 1 已采纳 <script> var one = document.getElementById("first"); //var one1 = one.lastChild.first
javascript下查找父节点的简单方法
2020-10-30 17:46

### JavaScript 下查找父节点的简单方法 #### 一、引言在Web开发中，DOM操作是一项非常重要的技能。特别是当涉及到元素的选择、修改以及事件处理时，掌握如何有效地访问和操作DOM节点变得尤为重要。本文将详细介绍...
Ext tree 节点没有定义href，单击时自动跳转 javascript
2010-08-19 15:41

回答 1 已采纳 Ext.tree.TreeEventModel.prototype.getNodeTarget = function(e) { var t = e.getTarget('.x-tree-node-
原生javascript如果给li加上一个id javascript
2021-08-27 14:02

回答 2 已采纳 <script type="text/javascript"> //添加滚动事件 window.addEventListener("scroll",function(e)
可以取到 treePanel 节点的 href 属性的值吗？ javascript
2009-06-18 14:15

回答 2 已采纳 [code="js"]treePanel.on('click',function(node){ alert(node.attributes.href); });[/code]
JavaScript学习笔记：创建、添加与删除节点
2019-12-05 18:48

howard2005的博客 JavaScript学习笔记：创建与添加节点一、DOM对象节点类型二、创建节点 1、创建元素节点 createElement(element)用于创建元素节点比如：var anode = document.createElement('a');创建一个标签名为a的...
js里操作DOM节点性能损失最低的方式是什么？ javascript
2016-03-16 21:02

回答 2 已采纳 innerHTML是属性，不是方法多个dom插入操作最好是用DocumentFragment，而不是每次都操作document，操作DocumentFragment，最后插入DocumentF
JavaScript创建节点的问题~不知道哪里错了
2016-07-02 01:39

回答 3 已采纳 ![图片说明](https://img-ask.csdn.net/upload/201607/02/1467436029_287085.png) 创建对象的方法中的document.creatEle
动态删除某节点下的所有节点出错指点下。谢 javascript
2011-03-25 14:10

回答 2 已采纳看来你这个是专门针对IE的改成如下[code="java"] for(j=len-1; j>=0; j--) { alert(len + "" + tbodyObjNodes[j
JavaScript DOM：Node对象、添加子节点、删除子节点
2020-04-17 18:51

_七七的博客 appendChild() :向节点的子节点列表的结尾添加新的子节点。 removeChild() : 删除(并返回)当前节点的指定子节点。 replaceChild() :用新节点替换一个子节点。属性 parentNode返回节点的父节点。举例： <!...
jQuery插件zTree实现删除树子节点的方法示例
2020-10-20 06:07

在本文中，我们将深入探讨如何使用jQuery插件zTree实现删除树形结构中的子节点。zTree是一款功能强大的jQuery树形插件，广泛应用于数据展示、文件管理等场景。通过以下示例，我们将理解如何遍历和删除zTree中的节点...
js实现点击添加一个input节点
2020-10-25 03:23

在介绍如何用JavaScript实现点击事件添加一个input节点之前，我们首先需要了解几个基础的Web编程概念和知识点。首先，JavaScript是一种动态的脚本语言，它可以通过文档对象模型（DOM）与HTML文档的元素进行交互。DOM...
JS简单添加元素新节点的方法示例
2020-10-18 18:02

本示例主要讲解了如何使用JavaScript来创建、添加和克隆页面元素节点，这些都是前端开发中常见的操作。下面将详细解析这些方法：首先，我们获取页面上的某个特定元素。在这个例子中，我们通过`getElementById`方法...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 3月22日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 3月14日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 3月14日

悬赏问题

¥15 如何让企业微信机器人实现消息汇总整合
¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
¥15 如何用Python爬取各高校教师公开的教育和工作经历
¥15 TLE9879QXA40 电机驱动
¥20 对于工程问题的非线性数学模型进行线性化
¥15 Mirare PLUS 进行密钥认证？（详解）
¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
¥20 想用ollama做一个自己的AI数据库
¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
¥15 请问怎么才能复现这样的图呀

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

3条回答 默认 最新

整个href删掉，而不是留空的内容href=""，这样是链接，链接地址为空默认访问当前页面，点击后相当刷新页面，刷新了页面后js添加的内容会丢失，所以就出现题主说的全部删除这种效果了

问题事件

悬赏问题

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

3条回答默认最新