Question

我之前在我的JS文件中的字符串中有以下HTML，可以使用jQuery。我如何删除'fr-wrapper' div，并删除'fr-element' div但保留内部内容？

原始

<div class="pixer content row fr-box fr-inline">
        <div class="fr-wrapper" dir="auto">
            <div aria-disabled="false" class="fr-element fr-view" contenteditable="true" dir="auto" spellcheck="false">
                <div class="top-mid-float">
                    <div id="main-inner-header">
                        <h1><strong>Hello there!</strong></h1>
                    </div>
                    <div id="lower-content-header">
                        <p>Quisque tincidunt nunc in lacus consectetur, et pharetra velit pulvinar. Quisque id egestas tellus, vitae venenatis tellus. Etiam accumsan iaculis sem, in vestibulum odio tincidunt vel. Etiam justo massa, congue vulputate dui.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

我的目标是什么：

<div class="pixer content row fr-box fr-inline">
    <div class="top-mid-float">
        <div id="main-inner-header">
            <h1><strong>Hello there!</strong></h1>
        </div>
        <div id="lower-content-header">
            <p>Quisque tincidunt nunc in lacus consectetur, et pharetra velit pulvinar. Quisque id egestas tellus, vitae venenatis tellus. Etiam accumsan iaculis sem, in vestibulum odio tincidunt vel. Etiam justo massa, congue vulputate dui.</p>
        </div>
    </div>
</div>

由于这是动态的，top-mid-float中的内容总是不同的。

这是一个字符串，但是如果有解决方案从DOM中获取它然后这样做我可以使用它。

Answer 1

最简单的选择是将.unwrap() method链接两次：

$('.top-mid-float').unwrap().unwrap();

如果您需要检查以确保正在解包和删除正确的元素，那么您可以指定父元素的选择器（如果它们是事先已知的）：

$('.top-mid-float').unwrap('.fr-element.fr-view').unwrap('.fr-wrapper');

如果您的HTML以字符串形式提供（如评论中所述），这也会有效。

您只需链接.find()方法即可找到元素.top-mid-float：

$($element_string).find('.top-mid-float').unwrap().unwrap();

这是一个证明这一点的例子：

var $element_string = $('<div class="content fr-box fr-inline pixer row"><div class=fr-wrapper dir=auto><div class="fr-element fr-view"dir=auto aria-disabled=false contenteditable=true spellcheck=false><div class=top-mid-float><div id=main-inner-header><h1><strong>Hello there!</strong></h1></div><div id=lower-content-header><p>Quisque tincidunt nunc in lacus consectetur, et pharetra velit pulvinar. Quisque id egestas tellus, vitae venenatis tellus. Etiam accumsan iaculis sem, in vestibulum odio tincidunt vel. Etiam justo massa, congue vulputate dui.</div></div></div></div></div>');

$($element_string).find('.top-mid-float').unwrap().unwrap();

$('body').html($element_string);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

此外，如果内容是动态的，并且您无法始终选择.top-mid-float元素，那么您可以使用以下命令在DOM中达到该级别：

$($element_string).find('> * > * > *').unwrap().unwrap();

您也可以使用.children()方法在该级别选择直接子元素：

$($element_string).children().children().children().unwrap().unwrap();

更新示例：

var $element_string = $('<div class="content fr-box fr-inline pixer row"><div class=fr-wrapper dir=auto><div class="fr-element fr-view"dir=auto aria-disabled=false contenteditable=true spellcheck=false><div class=top-mid-float><div id=main-inner-header><h1><strong>Hello there!</strong></h1></div><div id=lower-content-header><p>Quisque tincidunt nunc in lacus consectetur, et pharetra velit pulvinar. Quisque id egestas tellus, vitae venenatis tellus. Etiam accumsan iaculis sem, in vestibulum odio tincidunt vel. Etiam justo massa, congue vulputate dui.</div></div></div></div></div>');

$($element_string).find('> * > * > *').unwrap().unwrap();

$('body').html($element_string);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您可以存储fr-element div的子项，从行中删除所有内容，然后重新附加子项：

var $row = $('<div class="content fr-box fr-inline pixer row"><div class=fr-wrapper dir=auto><div class="fr-element fr-view"dir=auto aria-disabled=false contenteditable=true spellcheck=false><div class=top-mid-float><div id=main-inner-header><h1><strong>Hello there!</strong></h1></div><div id=lower-content-header><p>Quisque tincidunt nunc in lacus consectetur, et pharetra velit pulvinar. Quisque id egestas tellus, vitae venenatis tellus. Etiam accumsan iaculis sem, in vestibulum odio tincidunt vel. Etiam justo massa, congue vulputate dui.</div></div></div></div></div>');

var children = $row.find('.fr-element').children();
$row.empty().append(children);

// If you want to add the result somewhere
$('body').html($row);

// Or, to turn the modified result back into an HTML string
var finalHTMLString = $row.wrapAll('<div>').parent().html();
console.log(finalHTMLString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

删除HTML字符串中的父div但保留内容

2 个答案: