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

最新推荐文章于 2024-04-14 11:46:37 发布
最新推荐文章于 2024-04-14 11:46:37 发布
阅读量2k 收藏 5
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57772211/article/details/124464957
版权

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.完成

weixin_57772211
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）
weixin_55437576的博客
03-12 896
效果展示
jQuery添加和删除指定标签的方法
11-23
jQuery如何为指定标签添加和删除一个样式: 在网页的实际应用中，需要根据不同的条件来改变元素的CSS样式，通过动态的给元素添加删除一个CSS类可以实现此功能，下面通过实例来介绍一下如何实现此种功能。 一.使用...
4种方法解决为 li列表 添加事件问题（for循环经典问题）
liuyuemozhu的博客
09-07 4263
在for循环中，为每个li列表添加事件的时候，总是需要得到每个li对应的下标值，这是就会产生一个问题，这篇博客代码就是分析问题产生的本质和提供了4种方法来解决问题
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 122
【代码】20230829-给ui下面的li绑定事件。
JS练习--向ul中给每个li添加点击事件 ，点击打印张三
lmd_hdx的博客
06-25 1771
向ul中给每个li添加点击事件 ，点击打印张三
js如何给ul的所有的li绑定事件，打印他们的索引
青山不改，绿水长流。
09-22 892
console.log(this.innerHTML+",索引是"+ n) }itemli[i].index=i;//给每个li定义一个index属性。(function(n){ //利用闭包，
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++){
某动漫网站源码max版本
03-25
2.增加当前播放集数标签:{maxz_nv} 3.增加总集数(自动获取最多集数的地址库):{maxz_num} 4.增加相关影片集{maxz_related} 5.增加下载模块 6.增加上下集数标签,让用户播放更方便 7.增加顶踩模块,用户体验 8.优化生成...
苹果8XPC和手机二合一完整版
02-03
MAC.Cookie.Del(name) 删除cookie的值; name=cookie名称 MAC.AdsWrap(w,h,n) 预留广告位占位; w=宽度,h=高度,n=名称 自动加载设置项： html元素ID为history： 自动设置为鼠标移动滑入滑出 显示隐藏 历史记录。 ...
JavaScript给每一个li节点绑定点击事件的实现方法
10-21
主要介绍了JavaScript给每一个li节点绑定点击事件的实现方法，包括js循环给li绑定参数不同的点击事件,需要的朋友可以参考下
jQuery详细教程
04-25
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点...
前端css+html+布局笔记
09-14
这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 <style type="text/css"></style> 使用内部样式表，进一步将表现和结构...
使用原生 js 给连续多个 li 绑定点击事件，输出每条 li 的下标（索引）的几种方式
17902的博客
08-25 2747
html： <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul> 方法一：通过设置属性方式给每一条 li 设置属性
给ui下面的li绑定事件
qq_41632427的博客
09-14 135
给ui下面的li绑定事件 ``` 给下面的每个li绑定点击事件 点击打印的结果分别是 1 2 3(提示：事件委托) 1 2 3 Document 1 2 3 </ul> <script> var ul = document.querySelector('ul')...
js禁用所有的input
Rockandrollman的博客
04-11 319
要在JavaScript中禁用所有的input元素，您可以使用document.querySelectorAll方法来选择所有的input元素，然后使用一个循环来为它们设置disabled属性。这段代码将会禁用页面上所有的input元素。
【300套】基于Springboot+Vue的Java实战开发项目(附源码+演示视频+LW)
2301_77929200的博客
04-12 1342
🧡今天给大家分享300+的Java毕业设计，基于Springboot+vue框架，这些项目都经过精心挑选，涵盖了不同的实战主题和用例，可做毕业设计和课程设计参考。✍️除了源码，对于大部分项目实现的功能都有相应的介绍，并且配有演示视频，方便大家根据自己的需要择优下载学习。💂另外如有定制需求或者想要相对应的论文参考，文末可以十我VX联系。🤝后续还会持续更新，欢迎关注！
js的filter函数
最新发布
xiaohua0708day的博客
04-14 186
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
li标签动态绑定点击事件
06-08
要动态绑定 li 标签的点击事件，可以使用以下代码： ```javascript // 获取所有的 li 标签 var lis = document.getElementsByTagName("li"); // 遍历所有的 li 标签 for (var i = 0; i ; i++) { // 为每个 li ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值