jquery のselect選択option値が消えない

Question

<select name="_test1" id="sidTest1">
	<option value="">()</option>
<select>

//optionタグの数を取得する
var cnt = $('#sidTest1').children('option').length;

if(cnt == "1"){

		//ここの条件に入ってくるのは確認済み
		alert(cnt);
		
		document.getElementById('sidTest1').style.display = 'none';
		document.getElementById('sidTest1').style.display = 'block';
		
		$('#sidTest1').children().remove();

}

idから要素を削除したく、「display = 'none';」、「display = 'block';」で
再表示して、その後、「option」タグを削除するようにしているのですが、削除できません。

alert(cnt);で、メッセージを一度表示させると、その下の処理が有効になり、
「option」タグを削除することが可能です。

もちろん、開発者コンソールから単体で、実施しても削除できます。

どのようにしたら削除できるようになりますでしょうか？

ご教授宜しくお願いします・

Comments

[m.ts10806]

html含めて現象再現できる全体の流れがわかるコードをご提示ください

[kei344]

https://jsfiddle.net/96eshj0f/ 効いていますよ。書かれている状況が再現するコード（HTML/JavaScript）を質問文に追記されたほうが回答を得やすいと思います。

[x_x]

何をしたいのかわからないので詳しくお願いします。

[cerfweb]

yambejpさんの回答に対してのコメントに書かれたコードと共に、できればhtmlも含めて追記してもらえますか。

[kei344]

https://jsfiddle.net/32kudyzr/ https://jsfiddle.net/32kudyzr/1/ alert有っても無くても効いていますよ。書かれている状況が再現するコード（HTML/JavaScript）を質問文に追記されたほうが回答を得やすいと思います。

[cerfweb]

kumakumatanさんの書かれている説明では、何をしたいのか誰にもわからないと思います。「optionタグを削除するようにしているのですが、削除できません。」とありますが、ちゃんと削除されているようです。どのような動きを期待されているのでしょうか。

Answer 1

DOM構造を読み終わってからやる必要があります

<script>
$(function(){
  $('select#idFrom option').remove();
  $('select#idto option').remove();
});
</script>
<select id="idFrom">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="idto">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="other">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Comments

[kumakumatan]

ご回答ありがとうございます。
強制的に読み終えたり、項目だけをリロードさせたりする方法などありますでしょうか？
宜しくお願いします。

[yambejp]

> 強制的に読み終えたり

それが例示した「$(function(){・・・});」の部分

> 項目だけをリロードさせたり

おっしゃる意味がわかりません。何かをトリガーに
追加されたり削除されたりするのですか？
提示されている条件が足りないと思います

[kumakumatan]

すいません。セレクトの切替により、値を表示・非表示させたく
思っています。
$(document).on('change', '#id名1, function(){
if($('[name="id名2"] option:selected').val() == "0"){
この時に掲示した命令をしたく思います。
}
$('select#idFrom option').remove();単体では有効になるのですが、
jqueryの中に入れると、有効になりません・・。

すいませんが宜しくお願いします。

[kumakumatan]

javascriptエラーを消したら、正常動作しました。
お騒がせしました。
ありがとうございました。