HTML利用JS移除指定的标签

JavaScript021

HTML利用JS移除指定的标签,第1张

用Js匹配li的t内容就可以的,看如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

</head>

<script type="text/javascript" src="jquery.js"></script>

<body>

    <div id="seltime1">

        <ul id="tbustime">

            <li t="11:00" p="60" c="50">

                <div>11:00-12:00</div>

                <div><b>50/50</b></div>

            </li>

            <li t="13:00" p="30" c="10">

                <div>13:00-13:30</div>

                <div><b>10/10</b></div>

            </li>

            <li t="13:30" p="60" c="10">

                <div>13:30-14:30</div>

                <div><b>10/10</b></div>

            </li>

        </ul>

    </div>

    <div>

<input type="button" value="移除" id="removeLi">

    </div>

</body>

<script type="text/javascript">

$(document).ready(function(){

    $('#removeLi').click(function(){

        $('#tbustime').find('li').each(function(){

            var t = $(this).attr('t')

            if(t == '13:30'){

                $(this).remove()

            }

        })

    })

})

</script>

</html>

粘贴后试试,记得引入jquery类库,若有任何疑问,欢迎追问....

1、新建一个html文件,命名为test.html,在test.html文件内,在div标签内,使用p标签创建多行文字。

2、在test.html文件内,设置指定标签的id属性,例如,这里设置第二个p标签的id为testpp,主要用于下面通过该id获得p对象。

3、在test.html文件内,使用button标签创建一个按钮,按钮名称为“去掉指定标签内容”。

4、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行clearcon()函数。

5、在js标签中,创建clearcon()函数,在函数内,使用getElementById()方法通过id(testpp)获得标签对象,将其innerHTML属性设置为空,便可实现删除标签的内容。

6、在浏览器打开test.html文件,点击按钮,查看实现的效果。

<button id="del">删除</button>

<div id=a><div id=b></div><div id=c1></div><div id=c2></div><div id=c9></div></div>

<script>

del.onclick=()=>document.querySelectorAll("div#a div[id^=c]").forEach(e=>e.remove())

</script>