Remove all child of a div by class

Question

I have divs with some elements inside such as images, texts, and divs that appends every time when I run the script. I need to remove from my main div all children div with class 'ui-resizable-handle'

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

And this what i want to receive (my goal):

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

How can i remove all children(divs with class 'ui-resizable-handle') of father divs (with class 'draggableTemplate')

more information:

i am using Jquery draggable() and resizable() on all div's with class name '.draggableTemplate' resizable() append a div's as you see in the first HTML, but after I save the page and open it to edit again this resizable() is appending this div's again, sow after a few edits a have many div's that don't need.

So I want to remove that div's when I save my HTML.

Answer 1

Select the children of .draggableTemplate elements by using > selector and then use remove() function:

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

Or, with jQuery .children() function:

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