JQuery(20)——动态删除节点

1、remove()删除选择的节点。

（1）案例：清空ul中的项，代码如下。

        $(function() {
         $("#btnRemove").click(function() {
            $("#ulSite li").remove();
            });
        });
<ul id="ulSite">
    <li>百度</li>
    <li>搜狐</li>
    <li>新浪</li>
</ul>
<input id="btnRemove" type="button" value="删除" />

$(“ul li.testitem”).remove(); 删除ul下li中有testitem样式的元素。自杀。把找到的都删掉。

 

（2）remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下：

                var lis = $("#ulSite li").remove();
                $(“#ulSite2”).append(lis);
$(“#ulSite li”).remove().appendTo($(“#ulSite2”));//appendTo其实会自动remove

（3）权限选择：

var items = $("#select1 option:selected").remove(); 
$("#select2").append(items);

（4）更狠的：

$("#select1 option:selected").appendTo($("#select2"))

 

2、empty()是将节点清空，清除节点的innerHTML，节点还在。

案例：选择球队：

（1）选择球队：

        $(function() {
            $("#tableToSelect tr").css("cursor", "pointer")
            .mouseover(function() {
                $(this).css("background", "red");
                $(this).siblings().css("background", "white");
            })
            .click(function() {
                $(this).remove();
                $("#tableSelected").append($(this));
            });
        });

（2）待选择球队：

<table id="tableToSelect">
<tr><td>火箭</td><td>100分</td></tr>
<tr><td>奇才</td><td>99分</td></tr>
<tr><td>小牛</td><td>98分</td></tr>
</table>
<hr />

（3）选中的球队：

<table id="tableSelected"></table>