如何利用JS实现在li中添加或删除class属性

如何利用JS实现在li中添加或删除class属性,第1张

可以使用jQuery的attr方法来实现对某一元素的的class的属性的添加或者删除,attr() 方法设置或返回被选元素的属性值.根据该方法不同的参数,其工作方式也有所差异,可以使用removeclass来删除class属性。

工具原料:编辑器、浏览器

1、为li添加class属性:

为某个li元素添加class=“special”的属性

$('li').attr('class','special')

2、删除class属性:

 $("li").removeClass("special")

})

使用原生的js实现删除ul下的第一个li代码如下:

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul> document.getElementsByTagName('ul')[0].removeChild(document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0])

解释:

document.getElementsByTagName根据标签获取元素,取得的是一个数组,包含所有指定标签的集合,其中document.getElementsByTagName('ul')[0]表示页面上的第1个ul标签(数组下标从0开始)

removeChild方法用于移除子元素,参数为需要移除的元素

用jquery库吧。

<ul id="abc">

    <li>abcdefg<input type="button" class="del"/></li>

    <li>abcdefg<input type="button" class="del"/></li>

    <li>abcdefg<input type="button" class="del"/></li>

</ul>

<script>

$(function(){

    $('#abc').on('click','.del',function(){

        $(this).closest('li').remove()

        return false

    })

})

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11647530.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存