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

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

＆＃13;

#test

＆＃13;

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);

＆＃13;

Answer 3

这是一个片段，显示了使用Martin建议的克隆功能的示例。 remove函数从原始html中删除所有带有“.ui-resizable-handle”的div，console.log将在删除后显示生成的html。只需运行下面的代码段即可查看行为。

$(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>

按类名删除元素

3 个答案: