Удалить все дочерние из div по классам

Question

Привет, у меня есть div с некоторыми элементами внутри, такими как изображения, тексты и div, которые добавляются каждый раз, когда я запускаю скрипт. Мне нужно удалить из моего основного div все childeren div с классом ' щ-изменяемая-ручка»

Это мой 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> 

И это то, что я хочу получить (мою цель):

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

Как я могу удалить все ребенок (див с классом «щ-изменяемая-ручка») от отца дивов (с классом 'draggableTemplate') более

информации:

я использую Jquery Draggable() и изменяемый() на всех Див-й с именем класса '.draggableTemplate' изменяемый() добавьте div, как вы видите в первом html, но после того, как я сохраню страницу и откройте ее для редактирования снова, этот resizable() добавляет этот div снова, сеет после нескольких изменений, у которых есть много div, которые не нужны.

Sow Я хочу удалить этот div, когда я сохраню свой html.

Answer 1

Выберите детей .draggableTemplate элементов, используя > селектор, а затем использовать remove() функцию:

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

Или, с 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>