仅删除 DOM JQuery 中的父元素

发布于 11-16 06:45 字数 515 浏览 1 评论 0原文

我已经没有主意了。我在这里遇到一个问题,我需要仅删除父元素,同时保留子元素。

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

I am running out of ideas. I have an issue here where I need to remove only the parent element while preserving the child element.

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

the resultant output should be

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(11

满天都是小星星2024-11-23 06:45:01

编辑:

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

只需选择 并使用 unwrap()[文档] 方法。

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

当然,选择器会根据您的实际标记而有所不同。

示例: http://jsfiddle.net/VyJv3/ ( styled div 已被删除)


原始答案:

按照这种方式,您将删除表格所需的元素。

如果您希望删除 ,则文本节点将作为 的子节点。你可以这么做。

如果您的 HTML 是这样的:

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

...并且您想摆脱 ,您可以使用 unwrap()[docs] 方法。

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

EDIT:

Sounds like you want to remove the <div> you added to the question.

Just select the <table> and use the unwrap()[docs] method.

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

Of course the selector will vary based on your actual markup.

Example: http://jsfiddle.net/VyJv3/ (the styled div has been removed)


Original answer:

The way it is, you'll be removing an element that is required for a table.

If you were hoping to remove the <td>, you'll have text node as a child of a <tr>. You can do that.

If your HTML was like this:

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

...and you wanted to get rid of the <span>, you could use the unwrap()[docs] method.

$('td > span').contents().unwrap();
帅气称霸2024-11-23 06:45:01

一种直接的方法:

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

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

A straight forward way:

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

A fiddle: http://jsfiddle.net/cb9sb/

贱人配狗天长地久2024-11-23 06:45:01

我想我明白你的意思了。

我认为这就是您所寻找的:

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

I think I get what you mean.

I think this is what your looking for:

$("td").closest("table").unwrap();
欢烬2024-11-23 06:45:01

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

One way would be to take what you want to remain and append it to the parent of the element you want to remove. Then remove the element which you want to remove.

三岁铭2024-11-23 06:45:01

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

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

You can clone the whole structure and just keep the pieces you want:

$('html').clone().appendTo('tmp');
风吹短裙飘2024-11-23 06:45:01

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

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

Take the contents of the div, and replace the div with that:

$(".remove_this_only").replaceWith($(".remove_this_only").html());
若沐2024-11-23 06:45:01
var inner = $(".remove_this_only").html();
var parent = $(".remove_this_only").parent();
$(".remove_this_only").remove();
parent.append(inner);
var inner = $(".remove_this_only").html();
var parent = $(".remove_this_only").parent();
$(".remove_this_only").remove();
parent.append(inner);
聆听风音2024-11-23 06:45:01

实际答案:


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

注释:< /strong>

  • appendbefore 和其他一些 jQuery 函数会自动执行“分离”。
  • 这些都很短,这使得它们很棒。

Answers in action:


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

Notes:

  • append, before, and some other jQuery functions do 'detachment' automatically.
  • These are all really short, which makes them awesome.
牛↙奶布丁2024-11-23 06:45:01

Detach() 不适用于您的情况?

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

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

算法:

  1. 分离内部块
  2. 删除块以破坏
  3. 将内部块附着在适当的位置。

Detach() does not work for your case ?

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

You can also use the html() methods to extract the source code.

Algorithm :

  1. Detach inner block
  2. Remove block to destroy
  3. Attach the inner block at proper place.
空城缀染半城烟沙2024-11-23 06:45:01

标记为答案的解决方案与评论中提到的不完全一样。

这是获取第一个子项和替换父项的精确解决方案
对于孩子来说,

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

这只会删除父标签并保持孩子的 dom 不变

The Solution Marked As Answer is Not Exact As Mentioned In Comment..

here is an Exact Solution to get the first children and the replace parent
with the child

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

this will only remove the parent tag and keep your child dom as it is

可爱暴击2024-11-23 06:45:01

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

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

注意:如果您不添加“.remove_this_only”选择器,它可能会展开比您想要的更多的父元素。或者,如果您想确保仅在“.remove_this_only”元素中专门定位“table”元素,您可以执行以下操作:

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

A very simple solution would be the unwrap() jQuery method, with an added selector to the parent element you want to remove. So in your case:

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

Note: if you don't add the '.remove_this_only' selector, it could unwrap more parent elements than you want. Alternatively, if you want to make sure you specifically target the "table" element only in the '.remove_this_only' element, you can do the following:

 $('.remove_this_only').find('table').unwrap('.remove_this_only');
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文