Supprimer tous les enfants d'un div par classe

Question

Bonjour j'ai div avec quelques éléments à l'intérieur comme des images, des textes, et divs qui ajoute chaque fois que je cours script.I devez retirer de mon div div tout childeren avec classe ' ui-redimensionnable-poignée »

cette mon 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> 

Et ce que je veux recevoir (mon but):

<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> 

Comment puis-je supprimer tous les enfants (divs avec classe 'ui-resizable-handle') de divs père (avec la classe 'draggableTemplate')

plus d'informations:

J'utilise Jquery draggable() et redimensionnable() sur tous les div de avec classname '.draggableTemplate' redimensionnable() ajouter une div comme vous voyez dans le premier html, mais après avoir sauvegardé la page et l'avoir ouverte pour éditer à nouveau cette resizable() ajoute de nouveau cette div, sème après quelques éditions un nombre de divs qui n'en ont pas besoin.

Sow je veux enlever cette div quand j'enregistre mon code HTML.

Answer 1

Sélectionnez les enfants de .draggableTemplate éléments en utilisant sélecteur > puis utilisez la fonction remove():

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

Ou, avec la fonction jQuery .children():

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