首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Jquery中删除OL子元素没有Li的Li元素?

在 jQuery 中删除 ol 子元素中没有 li 元素的 li 元素可以通过以下步骤实现:

  1. 使用 jQuery 选择器选取所有的 ol 元素:$("ol")
  2. 使用 .each() 方法遍历每个选中的 ol 元素。
  3. 在每个 ol 元素中,使用 .children() 方法选取直接子元素,并使用过滤器函数 .filter() 过滤出没有 li 元素的子元素:$(this).children().filter(function() { return $(this).prop("tagName") !== "LI"; })
  4. 最后,调用 .remove() 方法将过滤出来的子元素从 DOM 中删除:.remove()

以下是完整的示例代码:

代码语言:txt
复制
$("ol").each(function() {
  $(this).children().filter(function() {
    return $(this).prop("tagName") !== "LI";
  }).remove();
});

这样,以上代码将删除所有 ol 子元素中没有 li 元素的 li 元素。

关于 jQuery,它是一种广泛应用于前端开发的 JavaScript 库。它提供了许多方便易用的功能和方法,可以简化开发过程并提高效率。jQuery 可以用于处理 DOM 操作、事件处理、动画效果、AJAX 请求等。它是一款非常流行和常用的前端开发工具。

推荐的腾讯云产品:腾讯云 CDN(内容分发网络)。CDN 是一种通过将内容分布到全球各地的边缘节点来加速网站和应用程序的服务。腾讯云 CDN 提供高速可靠的内容传输,能够加速访问者对您网站的访问,并且提供多种缓存策略和安全防护功能。

腾讯云 CDN 产品介绍链接地址:https://cloud.tencent.com/product/cdn

请注意,以上回答仅代表个人观点,不涉及任何特定云计算品牌商的推广。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何在遍历的同时删除ArrayList 中的元素

---1、直接使用普通for 循环进行操作我们说不能在foreach 中进行,但是使用普通的for 循环还是可以的,因为普通for循环并没有用到Iterator 的遍历,所以压根就没有进行fail-fast...3、使用Java 8 中提供的filter 过滤Java 8 中可以把集合转换成流,对于流有一种filter 操作, 可以对原始Stream 进行某项测试,通过测试的元素被留下来生成一个新Stream。...某个即将删除的元素只包含一个的话, 比如对Set 进行操作,那么其实也是可以使用增强for 循环的,只要在删除之后,立刻结束循环体,不要再继续进行遍历就可以了,也就是说不让代码执行到下一次的next 方法...Java 中,除了一些普通的集合类以外,还有一些采用了fail-safe 机制的集合类。...由于迭代时是对原集合的拷贝进行遍历,所以在遍历过程中对原集合所作的修改并不能被迭代器检测到,所以不会触发ConcurrentModificationException。

3.8K81
  • jQuery 事件注册、事件处理

    2. selector: 元素的子元素选择器 。 3. fn:回调函数 即绑定在元素身上的侦听函数。 on() 方法优势1: 可以绑定多个事件,多个处理事件处理程序。...事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素 $('ul').on('click', 'li', function() {   alert('hello...on() 方法优势3: 动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件 $(“div").on("click",”p”, function(){...案例:发布微博案例 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。2.点击的删除按钮,可以删除当前的微博留言。 ​...代码实现 $(function () { // 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中 $

    3.8K20

    jQuery 事件注册与事件处理

    ()方法在匹配元素上绑定一个或多 个事件的事件处理函数 语法: element.on (events, [selector], fn) events:一个或多个用空格分隔的事件类型,如"click或"...selector:元素的子元素选择器. fn:回调函数即绑定在元素身上的侦听函数。 ? ? ?...$("li>我是后来创建的li>");            $("ol").append(li);       })     ​ 2....案例:发布微博案例 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 2.点击的删除按钮,可以删除当前的微博留言。...();                $("#txt").val("");           });            // 点击删除按钮,删除留言 on可以给动态创建的元素绑定事件

    1.7K41

    Jquery的属性操作和DOM操作

    position:absolute来设置子元素相对于父元素的定位距离 l  Position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。...如果没有匹配的元素,则返回undefined     1  offset().top  元素距离顶部的高度 (浏览器默认给8px)     2 offset().left  元素距离左边的高度(浏览器默认给...,指定的元素集合前面     6 after()和insertAfter()  在每个匹配元素之后插入内容    节点删除和复制         1 remove() 删除匹配的元素集合中所有的子节点(...删除所有子节点),绑定的事件,附加的数据都会移除         2 detach()从DOM中删除所有匹配的元素()与remove()不同的是,绑定的事件,附加的数据都会被保留下来        3...empty()删除匹配的元素集合中所有子节点,选中的元素保留,仅删除子节点,内容删除,元素依然保留        4 clone()复制节点,选中元素进行复制 <script type="text/

    1.4K20

    jQuery

    `是jQuery的顶级对象,相当于原生js中的window,元素通过`包装成jQuery对象,调用jQuery属性和方法。...,并没有添加到页面元素中 ---- 添加元素 1.内部添加(添加过后与原元素程父子关系 element.append(''内容'');//把内容放入匹配元素内部最后面,类似原生 appendChild。...element.remove();//删除匹配的元素(本身) element.empty();//删除匹配的元素集合中所有的子节点 element.html('');//清空匹配的元素内容,也可设置内容...//1. events: 一个或多个用空格分隔的事件类型,如"click"或"mouseover" 。 //2. selector: 元素的子元素选择器。...; }); 注意:事件委派现在大多采用⬆️这种写法: 优势在于当动态创建元素时,可以动态自动为其绑定事件 例如:ol里添加li并动态绑定事件 $("ol").on("click", "li", function

    21.1K50

    新增的querySelector、querySelectorAll测试

    从IE9开始DOM开始支持支持CSS的选择器了,DOM提供了两个接口 querySelector 得到一个DOM querySelectorAll 得到一组DOM 一个个的解释这些选择器也没有必要,我们结合前面的数组知识...页面上有一组元素,然后会依据我们数组中的预订选择值选择相应元素,并将背景变红色,同时提示选择器的含义。这样的代码便于运行理解和扩展。...-- hovertree.com --> 加一个jQuery的脚本 jquery/jquery-1.12.3.min.js”...指定元素名称", "属性中包含", "属性开始", "属性结束", "属性等于", "html部分", "元素内容为空白", "锚", "子元素"..."从第3个算起, 每隔2个(包含第2个)", "只有一个子元素", "可用状态", "不可用状态", "只读", "非只读", "选取状", "非选取状态", "一半状态

    39310

    前端(四)-jQuery

    对象,就可以对这个对象进行操作; 可以查找当前元素下的子元素; html //当鼠标访问指定的li时,指定的li下的p标签显示,鼠标移除后,对应的p消失 ol> li>3元素的子元素 }); //还可以是使用:hidden 和 :visible 可见选择器 $("#play ol li").mouseover(function...({"属性名":"属性值","属性名":"属性值"}) 设置多个指定属性的属性值 removeAttr("属性名") 删除指定属性 3.6 节点遍历 3.6.1 遍历子元素 方法 说明 children...() 获取元素的所有子元素 $(selector).children([expr]); 获取子元素的中的指定元素 3.6.2 遍历同辈元素 方法 说明 next() 获取当前元素后的第一个同辈元素 prev...节点 alert($(this).html()); //$(this)转换为jQuery节点 }); 3.6.5 end() 结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态; /

    8.6K30

    jQuery中的筛选&文档处理——案例

    //首先为大家介绍一些jQuery中的一些专有性名词 (并用案例来介绍) 过滤 顾名思义,过滤是什么?在已有的一部分标签中再找出符合要求的标签。我们先来看一下我们准备好的网页素材。...li>");  5  删 5.1 Empty():删除匹配的元素集合中所有的子节点(不包含匹配的元素) 案例:删除ul中所有的li 我们以删除ul中的li为例 来演示一下empty(); $("li...还行没有内容了,但是还留下了一点东西。Empty只会删除元素内的所有内容,不会删除这个元素。...大家要注意 ​​​​​​​​​​​​​​     5.2 Remove():删除匹配的元素集合中所有的子节点(包含匹配的元素) 我们再来用remove()来删除一下试试, $("li").remove(...); 直接删除成功,remove()删除包括元素自己及其所有子元素全部删除 6 .改 6.1ReplaceWith():将所有匹配的元素替换成指定的内容 替换 我们以ReplaceWith为例来演示一下效果

    2.8K30

    1. jQuery 选择器

    1. jQuery 选择器 ​ 原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。 1.1....; $("ol li:odd").css("color", "skyblue"); $("ol li:even").css("color", "pink"...); }) 另:  jQuery中还有一些筛选方法,类似DOM中的通过一个节点找另外一个节点,父、子、兄以外有所加强。...1.4 知识铺垫 jQuery 设置样式 $('div').css('属性', '值') jQuery 里面的排他思想 // 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式...2.需要得到当前小li 的索引号,就可以显示对应索引号的图片3.jQuery 得到当前元素索引号 $(this).index()4.中间对应的图片,可以通过  eq(index) 方法去选择5.显示元素

    88030

    jQuery查找DOM节点元素【jQuery框架应用入门07】

    本节教程主要带读者入门jQuery查找dom节点元素的方法。...1.查找html元素 查找元素的基础就是上一节中利用jQuery选择器来实现的,通过id、class、后代元素、子代元素、兄弟元素等选择器,查找指定需要的html元素,以便进一步对这些元素进行操作,以实现数据...有时候用选择器查找到的元素不能一次到位,需要通过find()方法或者not()方法进行二次筛选,把需要的结果留下,不需要的结果删除。...jQuery选择器的代码如下: $("ol li") (2)遍历每个节点的内容,然后匹配关键词“祖国”。 进一步使用each方法可以对找到的每个元素进行遍历,jQuery代码如下所示。...) } }) function这个匿名函数内,每次找到的元素用this关键词来表示,将其加入jQuery对象体系中,变为$(this)以便可以方便使用jQuery的text方法方便获得每个元素的文本内容

    12310

    前端成神之路-01_jQuery

    1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 。...是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。...因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。... 另: jQuery中还有一些筛选方法,类似DOM中的通过一个节点找另外一个节点,父、子、兄以外有所加强。...原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。 1.4.3.

    12K10
    领券