Javascript 从克隆的元素中删除隐藏的元素

此网页中隐藏了一些元素。现在，如果我想找到隐藏的元素：

var node =  jQuery('body')[0];
$(node).find(":hidden").remove();

var $node = ... ; // jQuery object of node to be cloned
$node.find(':hidden').addClass('markedForRemoval');

var $clone = $node.clone();

$clone.find('.markedForRemoval').remove();

// tidy up:
$clone.find('.markedForRemoval').removeClass('markedForRemoval');
$node.find('.markedForRemoval').removeClass('markedForRemoval');

这将从主节点中删除隐藏的元素（这将进一步更改页面的布局）。我想做的是复制（克隆）未隐藏的元素。为此，我尝试以下方法：

var clone = node.cloneNode(true);
$(clone).find(":hidden").remove();

但这会删除克隆中的所有元素，而不仅仅是隐藏的元素（正如预期的那样，因为它不在dom中）。从克隆中删除隐藏元素的最佳方法是什么。

尝试使用：

$(clone).children(':hidden').remove();

var clone=node.cloneNode（true）；
var hiddenElements=clone.querySelectorAll（'.hidden'）；//如果应用了隐藏元素，则css类将隐藏
对于（var i=0；i

如果没有隐藏类，则遍历所有子元素并检查display属性

var children = clone.childNodes;
for(var i = 0; i < children.length; i++){
   if(children[i].style && children[i].style.display == 'none'){
       clone.removeChild(children[i]);
   }
}

var children=clone.childNodes；
对于（变量i=0；i

我会坚持使用jQuery克隆。我的方法有点粗糙，但很有效

<div class="bla" > 
    <span class="hidden">hidden</span>
    <span class="hidden">hidden</span>
    <span class="hidden">hidden</span>
    <span > visible </span>
</div>

然后克隆可见的子对象

var b = $('.bla > :visible').clone() ; 

然后将它们相互添加

a.html(b)

整个事情会是这样的：

var a = $('.bla').clone()
var b = $('.bla > :visible').clone() ; 
a.html(b)

---

下面是一个示例：

我假设问题是，在将克隆重新插入DOM之前，所有克隆都被认为是隐藏的

也许您可以先将隐藏的元素标记为删除，然后克隆并删除标记的元素：

var node =  jQuery('body')[0];
$(node).find(":hidden").remove();

var $node = ... ; // jQuery object of node to be cloned
$node.find(':hidden').addClass('markedForRemoval');

var $clone = $node.clone();

$clone.find('.markedForRemoval').remove();

// tidy up:
$clone.find('.markedForRemoval').removeClass('markedForRemoval');
$node.find('.markedForRemoval').removeClass('markedForRemoval');

---

演示：

有时，

:visible

选择器是不够的，您还需要一个高度为0px的样式选择器，因为

显示：无和<代码>高度：0px不是等效的

在克隆之前，我们需要将元素标记为可见或不可见，因为一旦克隆，克隆就在一个变量中，但不在页面上，因此其中的所有内容都将符合
：hidden
。（好处：让我们尽可能提高效率，不要劫持类或id字段，而是使用自定义数据属性。）

识别真正隐藏的元素：

var node =  jQuery('body')[0];
$(node).find(":hidden").remove();

var $node = ... ; // jQuery object of node to be cloned
$node.find(':hidden').addClass('markedForRemoval');

var $clone = $node.clone();

$clone.find('.markedForRemoval').remove();

// tidy up:
$clone.find('.markedForRemoval').removeClass('markedForRemoval');
$node.find('.markedForRemoval').removeClass('markedForRemoval');

深度克隆节点：

删除隐藏元素：

var node =  jQuery('body')[0];
$(node).find(":hidden").remove();

var $node = ... ; // jQuery object of node to be cloned
$node.find(':hidden').addClass('markedForRemoval');

var $clone = $node.clone();

$clone.find('.markedForRemoval').remove();

// tidy up:
$clone.find('.markedForRemoval').removeClass('markedForRemoval');
$node.find('.markedForRemoval').removeClass('markedForRemoval');

这会像我说的那样删除所有元素。这是不正确的，因为所有元素都假定在克隆父元素后隐藏。正如Peter T.和Devesh Kumar所说，克隆不会呈现在页面上，因为它只是一个克隆，所以从技术上讲，其中的所有内容都是“隐藏的”这将清除克隆。他们没有必要有一个隐藏类。@DeveshKumar但是添加一个隐藏类会有伤害吗？您可以在克隆之前将隐藏类添加到所有隐藏元素中。如果有问题，请在克隆后立即删除该类。@DeveshKumar:您是有意隐藏一个元素。如果您可以轻松地使用css设置display:none（inline）属性，为什么会有人想设置该属性。为什么要尝试克隆正文？这将假定所有隐藏元素都是克隆节点的直接子元素。@JamesMontagne这是真的。。我真的不知道他想选择什么样的元素。。他可以选择任何他需要的东西，比如
b=$（'.bla'）。查找（':visible'）。克隆（）
；