クラス名で要素を削除します。

Question

HTML要素ではなく、変数からクラスタグを削除します。
私は簡単にそれを記述する方法については考えているので、私の例

HTMLを参照してください。私はクラス名でui-resizable-handleを含むすべての要素を削除したい

var s = ('#test')[0] 
// typeof s -> object 

：

<div id="test" class="layout ui-resizable ui-droppable"> 
    <div class="ui-resizable-handle ui-resizable-e"></div> 
    <div class="ui-resizable-handle ui-resizable-s"></div> 
    <div class="ui-resizable-handle ui-resizable-se"></div> 
    <div id="obj1" class="ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable"> 
     <img id="imgTest" class="photo"><img> 
     <div class="ui-resizable-handle ui-resizable-e"></div> 
     <div class="ui-resizable-handle ui-resizable-s"></div> 
     <div class="ui-resizable-handle ui-resizable-se"></div> 
    </div> 
</div> 

JavaScriptをHTML要素からではなく、変数sから取得します。

削除後、HTML要素は同じままです。

しかし、私はjavascriptやjQueryのことで、これを行うことができますどのように

<div id="test" class="layout ui-resizable ui-droppable"> 
    <div id="obj1" class="ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable"> 
     <img id="imgTest" class="photo"><img> 
    </div> 
</div> 

秒の値が変化しますか？

注：jQueryのは私

Answer 1

マーティンによって提案されたクローン機能の使用例を示す抜粋です。 remove関数は元のhtmlから '.ui-resizable-handle'を持つすべてのdivを削除し、console.logは削除後のhtmlを表示します。下のスニペットを実行して、動作を確認してください。ここで

$(function(){ 
 
    var s = $('#test').clone(); 
 
    s.find('.ui-resizable-handle').remove(); 
 

 
    console.log(s.html()); 
 
});

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

 
<div id="test" class="layout ui-resizable ui-droppable"> 
 
    <div class="ui-resizable-handle ui-resizable-e"></div> 
 
    <div class="ui-resizable-handle ui-resizable-s"></div> 
 
    <div class="ui-resizable-handle ui-resizable-se"></div> 
 
    <div id="obj1" class="ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable"> 
 
     <img id="imgTest" class="photo"><img> 
 
     <div class="ui-resizable-handle ui-resizable-e"></div> 
 
     <div class="ui-resizable-handle ui-resizable-s"></div> 
 
     <div class="ui-resizable-handle ui-resizable-se"></div> 
 
    </div> 
 
</div>

Answer 2

ですから、変数に異なるHTMLマークアップをしたいために良いですか？クローンを最初に使用して、元のHTMLに変更が反映されないようにする必要があります。ここで

var s = $('#test').clone(); 
s.find('.ui-resizable-handle').remove(); 

console.log(s); 

https://api.jquery.com/clone/

Answer 3

理解しやすい例です。私たちは#testをクローンし、それをループして、各子要素に子があるかどうかを確認します。そうであれば、子をループして、.ui-resizable-handleクラスのすべての要素を削除します。子どもがいない場合は、.ui-resizable-handleのクラスを持つ子どもを削除するために#testを続けます。次に、#testのクローンを最後までプリントして、実際にメモリ内の子を削除したことを確認します。

var copy = $("#test").clone(); // Copy of DOM 
 

 
copy.children().each(function() { 
 
    if ($(this).children().length > 0) { // Check to see if any child has children 
 
    $(this).children().each(function() { 
 
     if ($(this).hasClass('ui-resizable-handle')) { 
 
     $(this).remove(); // Grandchild removal 
 
     } 
 
    }); 
 
    } 
 
    if ($(this).hasClass('ui-resizable-handle')) { 
 
    $(this).remove(); // Child removal 
 
    } 
 

 
}); 
 

 
console.log($(copy)[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test" class="layout ui-resizable ui-droppable"> 
 
    <div class="ui-resizable-handle ui-resizable-e"></div> 
 
    <div class="ui-resizable-handle ui-resizable-s"></div> 
 
    <div class="ui-resizable-handle ui-resizable-se"></div> 
 
    <div id="obj1" class="ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable"> 
 
    <img id="imgTest" class="photo"><img> 
 
    <div class="ui-resizable-handle ui-resizable-e"></div> 
 
    <div class="ui-resizable-handle ui-resizable-s"></div> 
 
    <div class="ui-resizable-handle ui-resizable-se"></div> 
 
    </div> 
 
</div>