空父DIV但不是子div

Question

我有两个div包含在另一个中：

<DIV id="DIV_1">
    parent_contents
    parent_contents

     <DIV id="DIV_2">
         child_contents
         child_contents
     </DIV>
</DIV>

我想删除parent_contents，但不删除child_contents。当我这样做时：

$('#DIV_1').remove();

我丢失了孩子的内容...

Answer 1

过滤掉文本节点并将其删除：

$('#DIV_1').contents().filter(function() {
    return this.nodeType === 3;
}).remove();

FIDDLE

或仅留下#DIV_2，只过滤掉一个元素：

$('#DIV_1').contents().filter(function() {
    return this.id != 'DIV_2';
}).remove();

FIDDLE

Answer 2

我非常确定最简单的方法之一是将DIV_2子内容复制到变量中，然后在清空后将其附加到DIV_1。

jsFiddle DEMO

var $temp = $('#DIV_2');
$("#DIV_1").empty().append($temp);