使用JQ删除节点和选美女例子

  1. remove():删除匹配DOM节点,会移除元素本身;返回被删除节点对象,可以继续复用。 示例:$("ul li.redli").remove() 删除ul下class为redli的li。 链式写法:$("#ul1 li.redli").remove().appendTo($("#ul2")),删除后直接移动到另一个容器。
  2. empty():清空元素内部所有子节点,标签本身保留;等价写法html('')

练习案例:选美女。点击上方li名字,把当前li移动到下方ul容器。

原理:remove()移除当前元素,配合appendTo()移动到目标位置。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm23.aspx.cs" Inherits="WebApplication1.WebForm23" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
    <script type="text/javascript">
        $(function () {
            $("ul:first li").click(function () {
                $(this).remove().appendTo($("#best"));
            });
        });
    </script>
</head>
<body>
    <p>请选择哪个最好看:</p>
    <ul>
        <li>西施</li>
        <li>昭君</li>
        <li>貂蝉</li>
        <li>叶子</li>
    </ul>
    <p>最好看的在下面:</p>
    <ul id="best"></ul>
</body>
</html>
Code language: HTML, XML (xml)

说明: 点击上方li,$(this).remove()把当前li从原ul移除,.appendTo("#best")追加到id为best的ul中,实现元素移动效果。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注