通过 class 删除 div 的所有子项

Question

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

我如何删除所有子项（divs with class 'ui-resizable-handle'）父亲 div 的（与 class 'draggableTemplate'）

more information:

我正在使用 Jquery draggable() 和 resizable() 在所有 div 上使用 class name '.draggableTemplate' resizable() append a div正如您在第一个 HTML 中看到的那样，但在我保存页面并打开它再次编辑后，此 resizable() 再次附加此 div，经过几次编辑后播种有很多div不需要的。

所以我想在保存 HTML 时删除 div。

Answer 1

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

通过 class 删除 div 的所有子项

Remove all child of a div by class

javascript

jquery

html

resizable