jQuery を使用して新しい<option>
タグを<select>
フィールドに追加していますが、場合によっては、それらの値を知らずにそれらのオプションを削除する必要があります。
元のオプションをそのままにして、jQuery によって作成されたすべてのオプションを削除することは可能ですか?
私が考えられる唯一の方法は、保持したい値ではないことを確認することです。うまくいけば、より簡単で迅速な方法はありますか?
4 に答える
要素が DOM に挿入されると、それらはすべて等しくなります。チェックできる魔法の「動的に作成された」フラグはありません。
もちろん、そのための独自のメソッドをいつでも作成できます。たとえば、"data-dynamic"
HTML 属性またはdynamic
CSS クラスを動的に作成されたオプションに追加し、それに基づいてフィルター処理することができます。
汚いですが、ここに行きます。
$(function() {
var myselects = $('#myselectelement');
var myoptions = myselects.html();
// now we know the state of the select on ready
var resetopts = function(sel, opt)
{
sel.html(opt);
}
// call resetopts(myselects, myoptions) when you want to reset.
});
この方法では、余分なマークアップを追加しません。ただし、メモリ コストがかかります。
DOM 要素でこれを行う方法はありますが、タッチ スクリーンでメモリから入力するのは上記の方法で十分困難でした。
タグにプロパティを追加して、それをフィルタリングできます。たとえば、それらをクラスの一部にして、appended
そのように削除できます。例については、この fiddleを参照してください。
すべての動的要素が自分で作成されている場合は、HTML5 の data-attributeを使用して要素に小さなメタデータを保存し、これを簡単にすることができます。
例えば、
element.attr("data-dynamic", "true");
次に、次の方法ですべての動的要素を見つけることができます。
$('*[data-dynamic="true"]')
もちろん、これがどのタイプの要素に表示されるかを知っていれば、より効率的にすることができます:
$('option[data-dynamic="true"]')
これには、後で JavaScript で使用するために非動的に作成された HTML にデータを格納するなど、さらに多くの用途があります。
注: HTML5 ですが、これはほとんどのブラウザー (IE4+) で機能します。属性を取得するのと同じです。違いは、HTML5 doctype を持つ有効な HTML と見なされることです。