删除除孩子之外的所有内容

Question

<div class="parent">
   <span>sometext</span>
   plain text
   <input class="child">
</div>
<div class="parent">
   <span>sometext</span>
   plain text
   <input class="child">
</div>
<div class="parent">
   <span>sometext</span>
   plain text
   <input class="child">
</div>

如何安全地删除.parent 中除.child 之外的所有内容？

我正在使用此代码（其中items 是.child 的堆栈，each 是.child）

items.each(function(){
    $(this).parent().children().each(function(){
       if ($(this).hasClass('child'))
          // do something
       else
          $(this).remove();
    });

    $(this).unwrap(); // remove parent, keep only .child
});

但它不处理纯文本。

Answer 1

你说过

.parent 内部可以有多个.child，我们只保留第一个。所以如果有三个，第二个和第三个应该被删除。

还有那个

items 是.child 的堆栈，每个都是.child

好的，那我就是这样做的：

items.parent('.parent').each(function() {
    var parent = $(this),
        child  = parent.children('.child').first();
    child.detach();
    parent.empty().append(child);
});

这是做什么的：

1. 从.child 元素集移动到.parent 元素集。结果集将只有唯一的父母。

2. 循环通过父母。

3. 获取每个父级中的第一个 .child 并将其分离。

4. 清空.parent。

5. 重新附加.child。

最终结果是每个.parent 将只有一个.child（并且没有其他个孩子，无论.child 与否）。

Answer 2

这里有一个纯 JS 的解决方案：fiddle

因此，在您的循环中，您可以使用以下内容：

this.parentNode.innerHTML = this.outerHTML;

如果您必须保留附加的事件处理程序：

var _this = this.cloneNode(true),
    parent = this.parentNode;
parent.innerHTML = '';
parent.appendChild(_this);

Answer 3

这样的事情就可以了；

$('.parent').on('click', '.child', function(e) {
    var $this = $(this),
        $parent = $this.parent(),
        $children = $parent.find('.child'); // or: $this.siblings('.child');

    $parent
        .empty() // Empty the "parent" element
        .append($children); // Re-append all "child" element to "parent"
    $this.focus(); // Focus the (input) element
});

Answer 4

这是使用正则表达式的替代方法：

$('.parent').each(function() {
    $(this).html($(this).html().match("<input class=.child.>"));
});