div要素をjquery

Question

で親要素から削除することは、foo-1クラス内のul要素を削除せずに、親クラスのコンテナを持つすべてのdiv要素を削除することは可能ですか？

<div class="container"> 
    <div class="foo-1"> 
     <ul class="toon"> 
      <li>li 1</li> 
      <li>li 1</li> 
     </ul> 
    </div> 
    <div class="foo-2">foo 2</div> 
</div> 

Answer 1

あなたはこれが全体.foo-1要素を保持し、そのようなUL

$('.container').children(':not(:has(ul.toon))').remove();

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

 
<div class="container"> 
 
    <div class="foo-1"> 
 
     <ul class="toon"> 
 
      <li>li 1</li> 
 
      <li>li 1</li> 
 
     </ul> 
 
    </div> 
 
    <div class="foo-2">foo 2</div> 
 
</div>

を含む任意の要素を除外することができます。あなたにも親.foo-1を削除したい場合は
、あなたは、これらの両方が要素に添付される可能性がありますすべてのイベントとそれに関連するデータを続けるだろう$('.toon').unwrap()

$('.container').children(':not(:has(ul.toon))').remove(); 
 
$('ul.toon').unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="foo-1"> 
 
     <ul class="toon"> 
 
      <li>li 1</li> 
 
      <li>li 1</li> 
 
     </ul> 
 
    </div> 
 
    <div class="foo-2">foo 2</div> 
 
</div>

を呼び出す必要があります。

Answer 2

unwrap（）で試してください。 例：

$(".toon").unwrap(); 

Answer 3

私はul要素をクローンし、コンテナ内のdivを削除して、ulを後ろに追加します。なぜそれを行う必要があるのか​​分かりませんが、それが必要な場合はどうすればいいですか。

var toon = $(".toon").clone(); 

$(".container").children().remove(); 

$(".container").append(room); 

Answer 4

私には2つのソリューションを発生します。

• まず、変数にクラスの容器の内容物を入れて、そのクラスのコンテナでのdivを消し、どこでそのdiv要素に変数の内容を追加します、
• 第2に、クラスコンテナでdivに適用されたCSSのみを削除したい場合は、そのdivからそのクラスを削除することができます。

私はあなたに役立つことを願っています。

Answer 5

$(".container").children().each(function(){ 
 
    $(this).html(); 
 
    $(this).parent().append($(this).html()); 
 
    $(this).remove(); 
 
}); 
 
console.log($(".container").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="foo-1"> 
 
     <ul class="toon"> 
 
      <li>li 1</li> 
 
      <li>li 1</li> 
 
     </ul> 
 
    </div> 
 
    <div class="foo-2">foo 2</div> 
 
</div>

まず私は、親すなわちに自分の内側のHTMLを追加し、すべての子どもたちを横断しています。子div内のすべてのhtmlを取得して親に追加するのに役立ちます。次の例では、すべてのコンテナが削除され、htmlだけが残ります。

$(".container").children().each(function(){ 
 
    $(this).unwrap(); 
 
}); 
 
console.log($(".container").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="foo-1"> 
 
     <ul class="toon"> 
 
      <li>li 1</li> 
 
      <li>li 1</li> 
 
     </ul> 
 
    </div> 
 
    <div class="foo-2">foo 2</div> 
 
</div>