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>