仅删除DOM JQuery中的父元素

时间:2011-06-21 15:51:06

标签: jquery dom parent

我的想法已经不多了。我有一个问题,我需要在保留子元素时只删除父元素。

<div class="remove_this_only">
    <table>
        <tbody>
            <tr>
                <td>I want to get preserved</td>
            </tr>
        </tbody>
    </table>
</div>

结果输出应为

<table>
    <tbody>
        <tr>
            <td>I want to get preserved</td>
        </tr>
    </tbody>
</table>

11 个答案:

答案 0 :(得分:9)

修改

听起来您想删除添加到问题中的<div>

只需选择<table>并使用unwrap()[docs]方法。

$('div > table').unwrap();

当然,选择器会因您的 实际 标记而异。

示例: http://jsfiddle.net/VyJv3/ (已删除样式div


原始回答:

就是这样,你将删除一个表所需的元素。

如果您希望删除<td>,则您将文本节点视为<tr>的子节点。你可以这样做。

如果你的HTML是这样的:

<html>
<table>
    <tbody>
        <tr>
            <td><span>I want to get preserved</span></td>
        </tr>
    </tbody>
</table>

...你想要摆脱<span>,你可以使用unwrap()[docs]方法。

$('td > span').contents().unwrap();

答案 1 :(得分:6)

直接的方式:

var div = $(".remove_this_only");
var tmp = div.children().clone();
var parent = div.parent();
div.remove();
tmp.appendTo(parent);

小提琴:http://jsfiddle.net/cb9sb/

答案 2 :(得分:1)

你可以克隆整个结构,只保留你想要的部分:

$('html').clone().appendTo('tmp');

答案 3 :(得分:1)

我想我明白你的意思。

我认为这就是你要找的东西:

$("td").closest("table").unwrap();

答案 4 :(得分:0)

Detach()不适合你的情况吗?

http://api.jquery.com/detach/

您还可以使用html()方法提取源代码。

算法:

  1. 分离内部块
  2. 删除块以销毁
  3. 将内部块安装在适当的位置。

答案 5 :(得分:0)

一种方法是获取您想要保留的内容并将其附加到要删除的元素的父级。然后删除要删除的元素。

答案 6 :(得分:0)

获取div的内容,并将div替换为:

$(".remove_this_only").replaceWith($(".remove_this_only").html());

答案 7 :(得分:0)

var inner = $(".remove_this_only").html();
var parent = $(".remove_this_only").parent();
$(".remove_this_only").remove();
parent.append(inner);

答案 8 :(得分:0)

行动答案:


//option 1
var $table = $('table');
$table.parent().before($table).remove();

//option 2
var $toRemove = $('.remove_this_only');
$toRemove.before($toRemove.children()).remove();

//option 3
$('table').unwrap();

备注:

  • appendbefore和其他一些jQuery函数会自动“分离”。
  • 这些都非常简短,这让它们很棒。

答案 9 :(得分:0)

标记为答案的解决方案并不像评论中提到的那样......

这是获得第一个孩子和替换父母的精确解决方案 和孩子一起

var child = $("#entry-longdesc").children().first().clone();
$("#entry-longdesc").replaceWith(child);

这只会删除父标记,并让您的孩子保持原样

答案 10 :(得分:0)

一个非常简单的解决方案是unwrap()jQuery方法,并为要删除的父元素添加了一个选择器。所以在你的情况下:

$('table').unwrap('.remove_this_only');

注意:如果您没有添加&#39; .remove_this_only&#39;选择器,它可以解开比你想要的更多的父元素。或者,如果你想确保你专门针对&#34;表&#34;元素仅在&#39; .remove_this_only&#39; element,您可以执行以下操作:

 $('.remove_this_only').find('table').unwrap('.remove_this_only');