按类名删除元素

Question

从变量中删除一些类标签，而不是从 HTML 元素中。
我不知道如何简要描述它，所以看我的例子

HTML：

<div id="test" class="layout ui-resizable ui-droppable">
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-se"></div>
    <div id="obj1" class="ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable">
        <img id="imgTest" class="photo"><img>
        <div class="ui-resizable-handle ui-resizable-e"></div>
        <div class="ui-resizable-handle ui-resizable-s"></div>
        <div class="ui-resizable-handle ui-resizable-se"></div>
    </div>
</div>

JavaScript：

var s = ('#test')[0]
// typeof s -> object

我想从变量 s 中删除类名中包含 ui-resizable-handle 的所有元素，而不是从 HTML 元素中删除。

删除后，HTML 元素还是一样的。

但是s的值变成了

<div id="test" class="layout ui-resizable ui-droppable">
    <div id="obj1" class="ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable">
        <img id="imgTest" class="photo"><img>
    </div>
</div>

我如何通过 javascript 或 jQuery 做到这一点？

注意：jQuery 更适合我

Answer 1

所以你想在变量中有不同的 HTML 标记？您应该先使用克隆，这样更改不会影响原始 HTML。

var s = $('#test').clone();
s.find('.ui-resizable-handle').remove();

console.log(s);

https://api.jquery.com/clone/

Answer 2

这是一个更容易理解的例子。我们克隆#test 并循环检查每个子元素是否有子元素。如果是这样，那么我们循环遍历子元素以删除类为.ui-resizable-handle 的所有元素。如果它没有任何孩子，那么我们继续向下#test 删除其具有.ui-resizable-handle 类的孩子。然后我们将#test的克隆打印到最后，看看我们实际上删除了内存中的孩子。

var copy = $("#test").clone(); // Copy of DOM

copy.children().each(function() {
  if ($(this).children().length > 0) { // Check to see if any child has children
    $(this).children().each(function() {
      if ($(this).hasClass('ui-resizable-handle')) {
        $(this).remove(); // Grandchild removal
      }
    });
  }
  if ($(this).hasClass('ui-resizable-handle')) {
    $(this).remove(); // Child removal
  }

});

console.log($(copy)[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="layout ui-resizable ui-droppable">
  <div class="ui-resizable-handle ui-resizable-e"></div>
  <div class="ui-resizable-handle ui-resizable-s"></div>
  <div class="ui-resizable-handle ui-resizable-se"></div>
  <div id="obj1" class="ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable">
    <img id="imgTest" class="photo"><img>
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-se"></div>
  </div>
</div>

Answer 3

这是一个 sn-p，显示了使用 Martin 建议的克隆功能的示例。 remove 函数从原始 html 中删除所有带有 '.ui-resizable-handle' 的 div，console.log 将显示删除后的结果 html。只需运行下面的 sn-p 即可查看行为。

$(function(){
  var s = $('#test').clone();
  s.find('.ui-resizable-handle').remove();

  console.log(s.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test" class="layout ui-resizable ui-droppable">
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-se"></div>
    <div id="obj1" class="ui-draggable ui-draggable-handle ui-draggable-dragging ui-resizable">
        <img id="imgTest" class="photo"><img>
        <div class="ui-resizable-handle ui-resizable-e"></div>
        <div class="ui-resizable-handle ui-resizable-s"></div>
        <div class="ui-resizable-handle ui-resizable-se"></div>
    </div>
</div>