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

最新推荐文章于 2023-09-01 10:33:00 发布
最新推荐文章于 2023-09-01 10:33:00 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57772211/article/details/124465184
版权
这篇博客详细介绍了如何使用JavaScript实现动态操作HTML页面，包括在ul列表中添加li元素，为li元素绑定点击事件，并在点击时删除当前被点击的li节点。通过创建新节点、设置文本内容和绑定事件，实现对DOM的操作。

摘要生成于 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 993
效果展示
js li 点击事件_事件委托(Html+Javascript)
weixin_42401159的博客
01-22 1958
什么是事件委托 事件委托又叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。为什么使用事件委托 庸俗的说，比如有一个ul下面有1万个li，不可能给每一个li添加绑定事件。一般我们通常会用for循环的方法，遍历所有元素，然后给他们添加点击事件，看似合理的做法，其实会很大的消耗性能。在js中频繁的操作Dome原生，会使浏览器多次重绘与重排，会影响页面的整个交互，w3c...
js为li添加点击事件，并且输出当前li点击的值
qq_39266265的博客
03-07 1万+
在使用js开发过程中，经常会遇到这样一个问题“如何对多个li添加onClick点击事件，并且输出点击对象的当前内容”。这是我们就想到了常用的for循环，如下图所示： 直接输出当前点击对象的内容 通过运行会发现依次点击li分别会弹出0,1,2； 由这类问题会引发一系列的问法，如果我们alert的是当时循环中的i值会出现什么情况： 直接输出循环中的i值 此时通过运行会发现无论点击那个li...
JavaScript给每一个li节点绑定点击事件的实现方法
10-21
主要介绍了JavaScript给每一个li节点绑定点击事件的实现方法，包括js循环给li绑定参数不同的点击事件,需要的朋友可以参考下
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添加动态点击事件
weixin_38383877的博客
02-26 5565
一、给动态li添加动态点击事件 试了网上的on,live,bind绑定，都不起作用。最后看到https://bbs.youkuaiyun.com/topics/390414057 上的代码。试了一遍，demo ok。 附上demo： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&gt...
JS 循环li添加点击事件 （闭包的应用）
10-20
主要介绍了js循环li添加点击事件 （闭包的应用）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
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++){
html给li添加点击事件,jQuery为iframe的body添加click事件的实现代码
weixin_32724679的博客
06-09 489
html结构如下：为body添加click事件function show_body_click(){alert('you are click the body');}jQuery(document).ready(function(){//jQuery("ifr_id").contents().find("body").attr("onclick", "show_body_click()");//a...
20230829-给ui下面的li绑定事件
最新发布
qq_41632427的博客
09-01 354
【代码】20230829-给ui下面的li绑定事件。
原生js的点击触发事件(点击x可以删除对应的标签)
wujiancai1163的博客
01-11 926
点击x可以删除对应的li标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
点击按钮删除li
wangsong97的博客
10-27 1627
先找到要删除的li的id 然后使用.remove进行删除 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery.js"></script> <title>点击按钮删除</title> </...
动态生成li标签，并设置点击事件
weixin_34343000的博客
08-02 1381
今天要解释的是如下界面 主要实现了： 1.模拟后台的json数据，动态生成li标签 2.导航栏的下划线 3.给li标签右边设置图片 4.动态生成的li标签，设置选中的li的点击事件，将右边的图片换掉 完整代码如下： <!DOCTYPE html> <html lang="en"> &...
//li加个点击事件
zhaohongx的专栏
04-15 1338
$.ui.ready(function(){   $('#reply_content').find("li").click(function ()   {  clickLi();  })   }); function clickLi() {//通过点li给id值  localStorage.setItem("tongzhi_id", getItem('tongzhi_id')); /
实现点击li就删除当前li（事件委托）
JQ_zhong
08-27 1987
<ul class="list" id="ul"> <li>aa<a href="#">删除</a></li> <li>bb<a href="#">删除</a></li> <li>cc<a href="#">删除</a></li> </ul> <script src="jquery-3.
手机端jQuery实现点击换一批标签功能
通过jQuery可以实现点击按钮后，动态地显示和隐藏不同的li标签组。这通常涉及到对元素的显示状态进行切换，例如使用`.show()`和`.hide()`方法或者通过修改元素的CSS样式来实现。 #### 示例代码解析 根据描述，以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值