添加li标签点击事件，删除当前点击li标签

最新推荐文章于 2023-09-01 10:33:00 发布
最新推荐文章于 2023-09-01 10:33:00 发布
阅读量2.2k 收藏 5
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57772211/article/details/124464957
版权
这篇博客详细介绍了如何在HTML中通过JavaScript实现li标签的动态管理。首先创建一个HTML文件，设置ul和li标签，并添加一个button按钮。接着在JavaScript中获取元素，为按钮绑定点击事件，创建新的li节点并添加文本，将新节点插入到ul中。同时，为ul绑定点击事件，通过事件对象兼容性和条件判断实现点击li元素时删除当前被点击的li。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.创建一个 HTML 文件

2.在html中写ul标签，给ul标签设置id，在ul标签里面写三个li标签,在li标签里面写任意文本内容 

3.在html中写一个button按钮给按钮设置一个id，设置按钮名

4.写一个script标签 

5.在script里获取ul标签

6.获取button按钮，给按钮设置点击事件

7.创建新节点

8.给新节点设置文本内容

9.添加新节点到父元素

10.给父元素绑定点击事件

11.事件对象兼容

12.给个判断

13.删除子节点

14.全部代码

15.完成

li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）
weixin_55437576的博客
03-12 990
效果展示
js为li列表添加点击事件
热门推荐
caoPengFlying的博客
11-09 5万+
今天看到一个面试题目//html代码 <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> //js代码 var oli = document.getElementsByTagName("li"); for(var i=0; i<oli.length; i++){
JavaScript给每一个li节点绑定点击事件的实现方法
10-21
主要介绍了JavaScript给每一个li节点绑定点击事件的实现方法，包括js循环给li绑定参数不同的点击事件,需要的朋友可以参考下
//li加个点击事件
zhaohongx的专栏
04-15 1334
$.ui.ready(function(){   $('#reply_content').find("li").click(function ()   {  clickLi();  })   }); function clickLi() {//通过点li给id值  localStorage.setItem("tongzhi_id", getItem('tongzhi_id')); /
JS实现li标签的删除
10-17
以上就是使用JavaScript实现li标签删除的核心知识点。通过上述步骤和代码示例，我们可以了解到如何通过原生JavaScript来操作DOM元素，实现动态的删除操作，并且让页面能够适应不同屏幕尺寸的显示需求。这对我们进行...
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
10-15
在这个例子中，`mounted`生命周期钩子中添加了一个全局的点击事件监听器。如果点击事件的目标不在`seatTipOperation`元素内，就隐藏弹框。`contains`方法用于判断事件目标是否在指定元素内，这是实现点击其他地方...
JS点击动态添加标签、删除指定标签的代码
10-18
### JS动态添加与删除标签 #### 点击动态添加标签 在网页中实现点击按钮动态添加标签的功能，通常涉及到DOM操作。上述代码中给出了一个简单的示例，创建了两个`div`元素和按钮。第一个`div`元素（`id`为`mDiv3`）...
JS实现动态增加和删除li标签行的实例代码
10-21
1. 当用户点击删除按钮时，事件监听器会调用这个函数，并传入当前按钮对象`obj`。 2. 使用`window.confirm`弹出确认对话框询问用户是否确认删除。如果用户点击“确定”，则执行删除操作；否则，函数返回`false`，不...
使用原生 js 给连续多个 li 绑定点击事件，输出每条 li 的下标（索引）的几种方式
17902的博客
08-25 3066
html： <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul> 方法一：通过设置属性方式给每一条 li 设置属性
JS 循环li添加点击事件 （闭包的应用）
10-20
主要介绍了js循环li添加点击事件 （闭包的应用）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
JS练习--向ul中给每个li添加点击事件 ，点击打印张三
lmd_hdx的博客
06-25 1965
向ul中给每个li添加点击事件 ，点击打印张三
js 给动态li添加动态点击事件
weixin_38383877的博客
02-26 5555
一、给动态li添加动态点击事件 试了网上的on,live,bind绑定，都不起作用。最后看到https://bbs.csdn.net/topics/390414057 上的代码。试了一遍，demo ok。 附上demo： &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt...
js li 点击事件_事件委托(Html+Javascript)
weixin_42401159的博客
01-22 1952
什么是事件委托 事件委托又叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。为什么使用事件委托 庸俗的说，比如有一个ul下面有1万个li，不可能给每一个li添加绑定事件。一般我们通常会用for循环的方法，遍历所有元素，然后给他们添加点击事件，看似合理的做法，其实会很大的消耗性能。在js中频繁的操作Dome原生，会使浏览器多次重绘与重排，会影响页面的整个交互，w3c...
html给li增加跳转事件,JS实现点击li标签弹出对应的索引功能【案例】
weixin_29870587的博客
06-04 1471
本文实例讲述了JS实现点击li标签弹出对应的索引功能。分享给大家供大家参考，具体如下：需求:点击li标签,弹出对应的索引先看效果:html结构:我是li标签1我是li标签2我是li标签3我是li标签4我是li标签5方法一:直接往标签里添加索引的方法var list=document.getElementById('ul1').children;//获取所有的li标签for(var i=0;ilis...
js为li添加点击事件，并且输出当前li点击的值
qq_39266265的博客
03-07 1万+
在使用js开发过程中，经常会遇到这样一个问题“如何对多个li添加onClick点击事件，并且输出点击对象的当前内容”。这是我们就想到了常用的for循环，如下图所示： 直接输出当前点击对象的内容 通过运行会发现依次点击li分别会弹出0,1,2； 由这类问题会引发一系列的问法，如果我们alert的是当时循环中的i值会出现什么情况： 直接输出循环中的i值 此时通过运行会发现无论点击那个li...
20230829-给ui下面的li绑定事件
最新发布
qq_41632427的博客
09-01 348
【代码】20230829-给ui下面的li绑定事件。
如何通过JS动态给li标签添加点击事件并跳转
Mr_Van的博客
11-29 5750
如何给li标签添加点击事件 **
为所有的Ul下的li标签添加点击事件
weixin_30299539的博客
03-27 2956
转载于:https://www.cnblogs.com/ttty/p/10608854.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值