javascript - 按类别删除 div 的所有子级

Question

我有一些 div，里面有一些元素，例如图像、文本和每次运行脚本时附加的 div。我需要从我的主 div 中删除所有带有“ui-resizable-handle”类的子 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>

我如何删除所有子项(类为“ui-resizable-handle”的 div) 父亲 div(带有类“draggableTemplate”)

more information:

我在所有 div 上使用 Jquery draggable() 和 resizable() 类名 '.draggableTemplate'这个 resizable() 再次附加这个 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>