如何删除jQuery对象中元素

删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

为jQuery-easyui 树添加，删除，修改树的节点，可能有人会说 *** 作完成以后刷新一下不就可以了吗。这种做法是可以，但是如果你的数据有很多，超过几万条。 *** 作完成后在刷新会很慢，效率不高。我们这里要讨论如何在不刷新的情况下外树添加，修改，删除节点。
首先在主页面添加几个方法：
[javascript] view plain copy
function removeRole(){
var node = $("#tt22")tree("getSelected");
$('#tt22')tree('remove', nodetarget);
}
function appendRole(leafText) {
var root = $("#tt22")tree('getRoot');
$("#tt22")tree("append",{
parent: roottarget,
data: [{
"text":leafText
}]
});
}
function updateRole(nodeText) {
var node = $("#tt22")tree("getSelected");
if(node) {
nodetext = nodeText;
$("#tt22")tree("update", node);
}
}
然后在 *** 作的时候，比如我添加一个角色，在action中添加三个变量： name：角色名称 operate：对应的 *** 作 role_id：角色Id
[java] view plain copy
requestsetAttribute("roleName", roleName);
requestsetAttribute("operate", operate);
requestsetAttribute("role_id", role_id);
然后在角色页面调用主页面定义的三个方法即可：
[javascript] view plain copy
$(function() {
var upd_flg = "${upd_flg}";
var add_role_id = "${add_role_id}";
var add_role_name = "${add_role_name}";
if((upd_flg == null) || (upd_flg == "")) {
return;
}
var leafText = "<a href=\"<%=path%>/admin/roleListOnloaddorole_id=";
leafText = leafText + add_role_id;
leafText = leafText + "\"";
leafText = leafText + " target=\"content_frame\">";
leafText = leafText + add_role_name;
leafText = leafText + "</a>";
if(upd_flg == "1") {
//新增
selfparentappendRole(leafText);
return;
}
if(upd_flg == "2") {
//修改
selfparentupdateRole(leafText);
return;
}
if(upd_flg=="3"){
//删除
selfparentremoveRole();
return;
}
});

传个参进去应该就行了，可以直接使用this
function delfile(e){
$(e)empty();
}
onclick='delfile(this);'
应当可以 你试试
当然还有其他方法，但这个是最简单的了
empty()是清除子节点吧，清除当前元素应当用remove() 不过如无必要还是建议你使用display:none

jquery 提供了remove() 方法，用来移除被选元素，包括所有文本和子节点。因此只需根据添加的div的id即可将其删除：

$(div_id)remove();

实例演示如下:

1、HTML结构

<div id="test">这是示例的DIV</div>
<input type="button" value="删除">

2、jquery代码

$(function(){
$("input[type='button']")click(function() {
$("div#test")remove();
});
});

3、效果演示

问题分析：

先梳理一下问题需求，根据问题描述可以得知，左侧是一个tree列表，列表共有4个节点，右侧是对应这4个节点的内容。点击左侧列表中的节点，右侧显示对应节点的内容。

解决方案：

为左侧tree列表的4个节点绑定click事件，事件回调函数中判断当前点击的是第几个节点（获取节点下标），右侧显示对应下标的内容。

举例如下：

为方便演示，以下案例假设右侧4个对应内容是页面初始化时已加载完毕，如果在实际业务逻辑中需要异步加载，也是可以的。

HTML代码：

<div id="left">
    <ul>
        <li class="active">节点1</li>
        <li>节点2</li>
        <li>节点3</li>
        <li>节点4</li>
    </ul>
</div>
<div id="right">
    <div class="show">我是内容1</div>
    <div>我是内容2</div>
    <div>我是内容3</div>
    <div>我是内容4</div>
</div>

CSS代码：

{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    width: 400px;
    height: 400px;
    margin: 40px auto 0;
}
#left{
    width: 150px;
    height: 400px;
    border: 1px solid #ccc;
    float: left;
}
#left li{
    border-bottom: 1px solid #ccc;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    list-style: none;
    cursor: pointer;
}
#left liactive{
    background-color: #ccc;
    color: #fff;
}
#right{
    width: 250px;
    height: 400px;
    float: left;
    border: 1px solid #ccc;
    border-left: none;
}
#right div{
    display: none;
    width: 100%;
    height: 100%;
    line-height: 400px;
    text-align: center;
}
#right divshow{
    display: block;
}

jQuery代码：

$('li')click(function() {
    //获取左侧节点下标
    var index = $(this)index();
    //清除指定左侧的选择状态
    $('liactive')removeClass('active');
    //为当前选择的节点增加选中状态
    $(this)addClass('active');
    //隐藏指定右侧内容
    $('#right divshow')removeClass('show');
    //根据下标显示对应内容
    $('#right div:eq(' + index + ')')addClass('show');
});

初始化运行结果：

点击节点2的结果：

点击节点3的结果：

点击节点4的结果：

总结：

从上面4张结果可以看出，当点击了左侧的节点时，右侧的内容也对应的发生了改变。

1、可以这样做：1234window_obj = '张三';//定义对象，这时候有了一个对象_objconsolelog，控制台输出对象:张三delete window_obj;//删除对象nameconsolelog(window_obj);//控制台输出：Undefind，1$('#your_id')remove。

2、$(document)ready(function(){ $("tab1_tag1_con a")click(function(){ var $abca=$(this)html(); var $parent = $("tab1_tag2_con"); var $parentlen=$("tab1_tag2_con")children("a")length; alert('<a href="javascript:void(0)">'+$abca+'</a>'); if ($parentlen<9) { $parentappend('<a href="javascript:void(0)">'+$abca+'</a>'); } else { alert("不能添加超过10个"); } }); $("input_bt7")click(function(){ var $city = $("#input_bt77")attr("value"); var $parent = $("tab1_tag2_con"); $parentappend($city); }); $("tab1_tag2_con a")click(function(){ $(this)remove(); }); }); 删除tab1_tag2_con a里原有的<a>就可以，但是不能删除后来添加的<a>。

3、remove方法移除被选元素，包括所有文本和子节点，该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

4、但除了这个元素本身得以保留之外，remove不会保留元素的 jQuery 数据，其他的比如绑定的事件、附加的数据等都会被移除。

---