javascript - 複製された要素から非表示の要素を削除する

Question

この Web ページにはいくつかの要素が隠されています。非表示の要素を見つけたい場合は、次のようにします。

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

これにより、非表示の要素がメイン ノードから削除されます (ページのレイアウトがさらに変更されます)。私がやりたいことは、非表示になっていない要素をコピー (クローン) することです。私はこれを試しています：

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

ただし、これにより、非表示の要素だけでなく、クローン内のすべての要素が削除されます (予想どおり、dom にはないため)。クローンから非表示の要素を削除する最善の方法は何ですか?

Answer 1

var clone = node.cloneNode(true);
var hiddenElements = clone.querySelectorAll('.hidden'); // if hidden elements are applied the css class hidden

for(var i = 0; i < hiddenElements.length; i++){
    clone.removeChild(hiddenElements[i])
}

隠しクラスがない場合は、すべての子要素を繰り返し処理し、表示プロパティを確認します。

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

Answer 2

私はjQueryクローンに固執します。私の方法はちょっとラフですが、うまくいきます。

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

まず、親のクローンを作成します。

var a = $('.bla').clone()

次に、表示されている子を複製します。

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

次に、それらを互いに追加します。

a.html(b)

全体は次のようになります。

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

例を次に示します: http://jsfiddle.net/4Dky9/1/

Answer 3

使ってみてください:

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