按班级删除所有div的子项

Question

我有div内部的一些元素,如图像,文本和div,每次运行脚本时都会附加.我需要从我的主要div中删除所有的孩子div与类'ui-resizable-handle'

这是我的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>

我怎样才能删除父div(带有'draggableTemplate'类)的所有子节点(具有类'ui-resizable-handle'的div)

更多信息:

我正在所有div上使用Jquery draggable()和resizable()与类名'.draggableTemplate'resizable()附加一个div,就像你在第一个HTML中看到的那样,但在我保存页面并打开它再次编辑后这个可调整大小( )再次追加这个div,在几次编辑之后播种,有许多不需要的div.

因此,我想在保存HTML时删除该div.

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>