从DOM中仅移除父元素JQuery

Question

从DOM中仅移除父元素JQuery

3

我已经没有更多的想法了。我有一个问题，需要删除父元素但保留子元素。

在IT技术方面。

<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>

- Nrusingha

如果您删除<td>或者<tr>标签中的任何一个（不确定指的是哪一个），那么您的HTML标记将无效。 - user113716

<html> <div class="remove_this_only"> <table> <tbody> <tr> <td>我想保留</td> </tr> </tbody> </table> </div> </html>。我想删除这个div。 - Nrusingha

我已经添加了一个答案，但我不确定您将在什么上下文中使用它。 - Tomgrohl

可能是重复的问题，参考链接：https://dev59.com/-W025IYBdhLWcg3wjGtO - goodeye

11个回答

6

一个简单的方法：

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

一个小例子：http://jsfiddle.net/cb9sb/

- wong2

1

-1 这里有些 bug。如果要移除的元素不在其父元素的末尾，那么你的代码顺序就会出错：http://jsfiddle.net/morrison/cb9sb/1/ - Levi Morrison

1

我想我明白你的意思了。

我认为这就是你要找的：

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

- Tomgrohl

0

您可以克隆整个结构，然后只保留您想要的部分：

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

- serialworm

这将如何移除<div>元素，并且 'tmp' 应该是什么意思？ - user113716

抱歉，我在示例中应该更加完整。wong2的答案解释了我的意思。如果您复制HTML节点，则可以按照您的意愿进行操作。 - serialworm

0

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

- webspy

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();

注意：

append、before 和其他一些 jQuery 函数会自动执行“分离”操作。
它们都非常简短，这使它们变得非常棒。

- Levi Morrison

0

被标记为答案的解决方案与评论中提到的不完全相同。

这里有一个确切的解决方案，可以获取第一个子元素并用子元素替换父元素。

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

这将仅删除父标签并保持您的子DOM不变

- Vishal Sharma

0

Detach() 对你的情况不起作用吗？

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

你也可以使用html()方法来提取源代码。

算法：

分离内部块
删除要销毁的块
将内部块附加到适当的位置。

- VGE

1

Detach()函数会移除内部块。 - Nrusingha

0

一种方法是将您希望保留的内容追加到要删除的元素的父级元素上，然后删除要删除的元素。

- ek_ny

0

获取 div 的内容，并用其替换 div：

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

- James Allardice

这个会起作用，但请记住它会删除所有相关的jQuery数据，比如事件处理程序。 - user113716

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

编辑:

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

只需选择 <table> 并使用 unwrap()^[文档] 方法即可。

$('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()^[文档] 方法。

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