CSSクラスを使用して特定の要素を検索して削除する

Question

JavaScriptの専門家からは遠いですが、mootoolsのコードをjQueryに移行しようとしていますが、苦労しています。

私は、CSSのクラスが '.table-row'であるいくつかのテーブルを含むWebフォームを持っています。ボタンをクリックすると、「.table-row」を持つすべての行を見つけたいと思います。表示プロパティがnoneに設定されている場合は、それらをページから削除してから送信してください。

これは私MooToolsのコードです：

function remove_hidden_elements() { 
    var myElements = $$('.table-row'); 
    myElements.each(function (item, index) { 
     var vis = item.getStyle('display'); 
     if (vis == 'none') { 
      item.dispose(); 
     } 
    }); 
} 

誰かがjQueryの内これを達成するために正しい方向に私を指すことができますしてください？

事前に感謝します。

Answer 1

jQueryとMooToolsはそれほど離れていません。 jQueryのは、より多くのセット指向やMooToolsはより多くの要素志向が、それ以外の場合...

リテラルjQueryのと等価である：基本的に

function remove_hidden_elements() { 
    var myElements = $('.table-row'); 
    myElements.each(function() { 
     if (this.style.display === 'none') { 
      $(this).remove(); 
     } 
    }); 
} 

、$()ため$$()をスワップ（別名jQuery()）と使用しますjQueryがそのバージョンのeachに渡してstyle.displayプロパティをチェックし、removeを使用します（jQuery経由で接続/関連付けされている場合は、イベントハンドラや他の関連データも検索して破棄します）。

function remove_hidden_elements() { 
    $('.table-row').each(function() { 
     var $this = $(this); 
     if ($this.is(":not(:visible)")) { 
      $this.remove(); 
     } 
    }); 
} 

jQueryの:visibleセレクタがリテラルstyle.display == 'none'以外のいくつかの例を処理し、:notは、それを反転：

function remove_hidden_elements() { 
    var myElements = $('.table-row'); 
    myElements.each(function() { 
     var $this = $(this); 
     if ($this.is(":not(:visible)")) { 
      $this.remove(); 
     } 
    }); 
} 

、あるいは変数を排除：

もう少し慣用jQueryがあるかもしれません。 （またはというより直接的、:hidden私は。疲れている必要があり—   3nigma points outとして使用）しかし、あなたは、具体的style.display == 'none'のちょうどそのケースを処理する場合（およびそれと間違って何もない、それはより効率的にすることができます）、最初の使用を上記の例（myElementsの有無にかかわらず）。

Answer 2

あなたは:hiddenセレクタ

$(".table-row:hidden").remove(); 

Answer 3

使用使用することができますないと：行をフィルタするために目に見えるセレクタを。

これを試してみてください：なしフィルターはその後、試してみてください：

function remove_hidden_elements() { 
    $('.table-row').filter(function(){ 
    return (this.style.display === "none"); 
    }).remove(); 
} 

function remove_hidden_elements() { 
    $('.table-row:not(:visible)').remove(); 
} 

注：

Elements can be considered hidden for several reasons: 

•They have a CSS display value of none. 

•They are form elements with type="hidden". 

•Their width and height are explicitly set to 0. 

•An ancestor element is hidden, so the element is not shown on the page. 

あなたは厳密にdisaplyを探している場合はjQueryのドキュメントを1として

を