Jquery删除节点元素

最新推荐文章于 2024-07-29 13:58:45 发布

weixin_30621711

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量238

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/abernhong/p/8596171.html

版权

删除节点的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点元素</title>
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            //删除节点元素-remove-删除ul中第1个li元素节点并重新添加到ul元素中去
            $("button#button-delete-1").click(function () {
                var $li = $("ul li:eq(0)").remove();//删除<ul>节点中第1个元素节点
                $("ul").append($li);//把刚删的元素节点重新添加到<ul>元素中去
            });
            //删除节点元素-remove-删除li元素title属性等于“IBM”的元素表删除
            $("button#button-delete-2").click(function () {
                $("ul li").remove("li[title=IBM]");//将<ul>元素下title属性等于"IBM"的li元素删除
            });
            //清空<ul>节点全部<li>元素的内容
            $("button#button-empty-3").click(function () {
                $("ul").empty();//清空<ul>节点全部<li>元素的内容
            });
        });
    </script>
</head>
<body>
<p>您好！您最喜欢的IT公司是：</p>
<ul>
    <li title="Google">Google</li>
    <li title="Apple">Apple</li>
    <li title="Microsoft">Microsoft</li>
    <li title="Intel">Intel</li>
    <li title="IBM">IBM</li>
    <li title="Facebook">Facebook</li>
</ul>
<button id="button-delete-1">
    删除节点元素-remove-删除ul中第1个li元素节点并重新添加到ul元素中去
</button>
</br>
<button id="button-delete-2">
    删除节点元素-remove-删除li元素title属性等于“IBM”的元素表删除
</button>
</br>
<button id="button-empty-3">
    清空ul节点全部li元素的内容
</button>
</br>
</body>
</html>

效果图如下：

总结：

转载于:https://www.cnblogs.com/abernhong/p/8596171.html

weixin_30621711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery删除节点元素

删除节点的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>删除节点元素</title> <script type="text/javascript" src="../jquery-...
复制链接

扫一扫