Удалить все, кроме детей

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

Вы сказали

Там может быть более чем один .child внутри .parent, мы держим только первый. Так что если есть три, второй и третий, нужно удалить.

и

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

Нечто подобное сделает это;

$('.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 3

Здесь вы бы решение с чистым JS: fiddle

Таким образом, внутри вашего цикла вы можете использовать следующее:

this.parentNode.innerHTML = this.outerHTML; 

Если бы вы должны держать прикрепленные обработчики событий :

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

Answer 4

Вот альтернатива, используя регулярное выражение:

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