Entfernen Sie alle Kind eines div von Klasse

Question

Hallo ich habe divs mit einigen Elementen wie Bilder, Texte und divs, die jedes Mal anhängen, wenn ich Skript ausführen. Ich muss von meinem Hauptdiv alle childeren div mit Klasse entfernen ' ui-resizable-Griff‘

Das ist mein Html:

<div class="draggableTemplate ui-draggable ui-draggable-handle ui-resizable"> 
     Some Text ... 
     <div class="ui-resizable-handle ui-resizable-sw" ></div> 
     <div class="ui-resizable-handle ui-resizable-n" ></div> 
    </div> 
    <div class="draggableTemplate ui-draggable ui-draggable-handle ui-resizable"> 
     <img width="114" height="93" alt="" src="/Cats/cat.jpg" /> 
     <div class="ui-resizable-handle ui-resizable-sw" ></div> 
     <div class="ui-resizable-handle ui-resizable-n" ></div> 
    </div> 

Und das, was ich will (mein Ziel) erhalten:

<div class="draggableTemplate ui-draggable ui-draggable-handle ui-resizable"> 
     Some Text ... 
    </div> 

    <div class="draggableTemplate ui-draggable ui-draggable-handle ui-resizable"> 
     <img width="114" height="93" alt="" src="/Cats/cat.jpg" /> 
    </div> 

Wie ich alle Kinder entfernen (divs mit Klasse 'ui-resizable-handle') von Vater divs (mit Klasse 'draggableTemplate')

weitere Informationen:

i Jquery draggable() und resizable() verwende auf allen divs mit classname '.draggableTemplate' resizable() fügen Sie ein divs, wie Sie in der ersten html sehen, aber nachdem ich Seite speichern und öffnen Sie es wieder zu bearbeiten, diese resizable() hängt diese divs wieder, säen nach ein paar Änderungen eine haben viele Divs, die nicht brauchen.

Sow ich möchte diese Div entfernen, wenn ich meine HTML speichern.

Answer 1

Wählen Sie die Kinder von .draggableTemplate Elemente durch > Selektor und dann remove() Funktion:

$('.draggableTemplate > .ui-resizable-handle').remove(); 

Oder mit jQuery .children() Funktion:

$('.draggableTemplate').children('.ui-resizable-handle').remove(); 

$(document).on('click', '#remove', function() { 
 
    $('.draggableTemplate > .ui-resizable-handle').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="draggableTemplate ui-draggable ui-draggable-handle ui-resizable"> 
 
     Some Text ... 
 
     <div class="ui-resizable-handle ui-resizable-sw" >Remove</div> 
 
     <div class="ui-resizable-handle ui-resizable-n" >Remove</div> 
 
    </div> 
 
    <div class="draggableTemplate ui-draggable ui-draggable-handle ui-resizable"> 
 
     <img width="114" height="93" alt="" src="/Cats/cat.jpg" /> 
 
     <div class="ui-resizable-handle ui-resizable-sw" >Remove</div> 
 
     <div class="ui-resizable-handle ui-resizable-n" >Remove</div> 
 
    </div> 
 

 
<button id="remove">Remove</button>