jQueryを削除する<option>タグを削除しないでください。

私はさまざまなユーザー入力に基づいて生成される動的な番号の<select>要素を持っています。私は特定の<option>を削除しようとしていますが、それぞれの選択に対して適用されませんが、jQueryはそれ以上削除するようです。<option>は私のコードに基づいて削除する必要があります。完全な使用例は再現するのが難しいので、私は見ているものを投稿し、これを理解するのに十分うまくいけばうれしいです。jQueryを削除する<option>タグを削除しないでください。

私が夢中ではないことを自分自身に証明するために、ループ内に<option>を削除する代わりに、クラスを追加することにしました。ここで私が使用したものです：

<select class="my-select" id="1295453461993"> 
<option title="1" value="1">1</option> 
<option title="2" value="2" class="option-remove">2</option> 
<option title="3" value="3">3</option> 
</select> 

<select class="my-select" id="1295453475890"> 
<option title="1" value="1">1</option> 
<option title="2" value="2">2</option> 
<option title="3" value="3" class="option-remove">3</option> 
</select>

私が起こることを探しています正確に何である：

$('.my-select').each(function(sourceIdx,sourceEl){ 
var id = $(sourceEl).attr('id'); 
var s = $('#'+id).parents('table').find('.some-input').val(); 
$(sourceEl).find('option[value="'+s+'"]').addClass('option-remove'); 
});

ここで生成されたソースです。私はすぐにループ以下、これを追加するときしかし、：私は言います

<select class="my-select" id="1295454051124"> 
<option title="1" value="1">1</option> 
</select> 

<select class="my-select" id="1295454058398"> 
<option title="1" value="1">1</option> 
<option title="2" value="2">2</option> 
</select>

：

$('.option-remove').remove();

が、私はこれが得る "待って、WHAT ?!"。はと表示され、jQueryが2番目の選択で <option>を削除すると、最初の <select>から同じ <option>（値= 3）が削除されます。クールではありません。

ここで何が間違っているのでしょうか？

jQuery 1.4.4でFireFox 3.5（IEと同じ結果）でテストしています。

出典

2011-01-19 Todd Sharp

私はこれを再現できません（[JSBin]（http://jsbin.com/evomi4/edit）を参照）。どこに '$（ '。option-remove'）を置いたのですか？remove（）'？そして、 'value =" 2 "' *と* 'value =" 3 "の両方に' $（sourceEl）.find（ 'option [value = "' + s + '"]'） ' '。 –

うんええええええええええええええええええええええええええええええええええええええええええたい場合は、完全なHTMLを投稿することができます。 – Chandu

2番目の選択は、はるかに大きなブロックのコードのhtml（）をコピーして外側のコンテナに追加することによって動的に作成されます。それがjQueryを混乱させるものであるかどうか疑問に思っていますか？ –

削ぎ落とした、非動的テストケースが正常に動作します：

<!doctype html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
</head> 

<body> 

<form> 
<select class="my-select" id="1295453461993"> 
    <option title="1" value="1">1</option> 
    <option title="2" value="2" class="option-remove">2</option> 
    <option title="3" value="3">3</option> 
</select> 

<select class="my-select" id="1295453475890"> 
    <option title="1" value="1">1</option> 
    <option title="2" value="2">2</option> 
    <option title="3" value="3" class="option-remove">3</option> 
</select> 
</form> 

<script> 
    $('.option-remove').remove(); 
</script> 

</body> 
</html>

「起こって何か他のもの...

出典

2011-01-19 16:41:16 sebduggan

私は同意します。私はjsfiddleでこれを作成し、Chrome＆FF（IEを試していない）で正常に動作します。 http://jsfiddle.net/jdowdle/kDeYF/1/ –

2番目の選択は、より大きなコードブロックのhtml（）をコピーして外側のコンテナに追加することによって動的に作成されます。それがjQueryを混乱させるものであるかどうか疑問に思っていますか？ –

それを考え出した。私はこのブロックの前の値を変更していたので、私の愚かなエラーです。 –

あなたの問題の解決策はわかりませんが、私は助けがあるかもしれません。多分このことがあなたの人生を楽にします - >https://github.com/SamWM/jQuery-Plugins/tree/master/selectboxes

私はそれを使いました。そして、そのような大きなプラグインではないので、大きなオーバーヘッドはありません。

出典

2011-01-19 16:36:20 dAnjou

$（sourceEl）.find（が存在する必要がありますオプション[value = "'+ s +'"] '）。addClass（' option-remove '）;

これを代わりに使用するとどうなりますか？

$('#' + id).find('option ...

すなわちIDによってではなく、関数に渡された要素によって

又は

$('#' + id + '> option[value="'+s+'"}')

すなわちそれがコピーされたときではなく

）第2の選択は、（HTMLをコピーすることによって動的に作成され

を「検索」よりも一つの大きなセレクタ、あなたはそれに固有のIDを与えていますか？

出典

2011-01-19 17:38:11

は最初の投稿をもう一度読んだだけで、問題はクラスの割り当てではなく、つまりターゲットが期待どおりに機能していることに気付きました。 selectのIDを関数に渡すことはできますか？ >> $（ '。option-remove'）。remove（）; のようなもの $（ '＃' + id + '> .option-remove'）。remove（）; ？ –

ちょうど興味があります - あなたは 'remove'以外のものを試してみましたか？like、try .hide（）、またはスクリプトをコンソールにスクリプトしてください...私はいつもremove（）のようなjqueryメソッドのトラブルシューティングを試みます別の方法を使用して、適切な要素が私のスクリプトによって一般的にターゲットにされていることを確認し、メソッド固有のものをバイパスします。そうでなければ、私は人を知らない、これは奇妙なものです。 –

jQueryを削除する<option>タグを削除しないでください。

答えて

関連する問題