通过类名删除一个 div 的所有子元素

Question

通过类名删除一个 div 的所有子元素

7

我有一些包含图片、文本和其他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>

如何删除所有父级div（类名为'draggableTemplate'）的子级div（类名为'ui-resizable-handle'）？

更多信息：

我正在使用Jquery draggable()和resizable()对所有类名为'.draggableTemplate'的div进行操作。resizable()会像您在第一个HTML中看到的那样追加一个div，但是保存页面后再次打开它进行编辑后，resizable()会再次追加这些div，所以在几次编辑后我有很多不需要的div。

因此，我想在保存HTML时删除这些div。

- Vladimir Potapov

尝试使用这个代码：$('.draggableTemplate .ui-resizable').removeClass('ui-resizable') - guradio

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kapantzak · Accepted Answer

使用 > 选择器选择 .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>