jqueryのremoveとappendは同時に使えない？

Question

jqueryでプルダウンのoptionを操作したいと思っています。

よくある検索機能で、入力した条件をクリアするボタンがあるとします。
そのボタンを押したらプルダウンに設定したoptionを一旦全部削除し、デフォルトのoptionを追加したいのですが

$('#search').find('option').remove().append($('<option>').html("---").val(""));

と書くと削除はされるのですが、appendしているhtmlがセットされません。

$('#search').find('option').remove();
$('#search').append($('<option>').html("---").val(""));

こう書くと期待通りに動くのですが、removeとappendは同時に指定できないのでしょうか？

Answer 1

removeは対象の要素自体を削除してしまうので、そこからappend出来なくなります。
子要素を削除するemptyを使ってみてはいかがでしょうか。

$('#search').empty().append($('<option>').html("---").val(""));

Comments

[NIA]

「#search」が使われているタグ内に<option>タグだけ使用しているなら、
こちらの方が断然スマートで速いですね。
findで探すことが省けますしチェーンメソッドで実行順序も守られますね。

[退会済みユーザー]

naga3さん
要素自体を削除してしまうのですね。手順が減って、すっきりしました。
ありがとうございました！

Answer 2

例えば、こんなふうにしてみては？

$.when($('#search').find('option').remove()).then( $('#search').append($('<option>').html("---").val("")) );

個人的には、可読性を考慮して記述されている下記の期待通り動くJSでいいと思います。

$('#search').find('option').remove();
$('#search').append($('<option>').html("---").val(""));

Comments

[退会済みユーザー]

ありがとうございます。このような書き方もあるんですね。
大変参考になりました！