MW WP FORM 土日だけ受付時間を変更したい

Question

前提

歯医者のHPの予約フォームがあるのですが、土日だけ受付時間が異なります。
土日は平日より二時間、受付時間が短いです。
平日：9:00-13:00　14:30-20:00
土日：9:00-13:00　14:30-18:00

【MW WP FORM】内でDatepickerを使用して、土日だけは
受付時間を二時間短くするコードをjsで書いてみたのですが、結果は平日しか表示されず困っています。

実現したいこと

平日は
9：00,9：30,10：00,10：30,11：00,11：30,12：00,12：30,14：30,15：00,15：30,16：00,16：30,17：00,17：30,18：00,18：30,19：00,19：30　を表示させて

土日は
9：00,9：30,10：00,10：30,11：00,11：30,12：00,12：30,14：30,15：00,15：30,16：00,16：30,17：00,17：30　を表示させたいです。（,18：00,18：30,19：00,19：30が選択肢にない）

該当のソースコード

<dt class="b_g"><span class="nini">任意</span>第1希望日時</dt>
<dd class="d_flex">
希望日 [mwform_text name="第1希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ]
 時間 
[mwform_select name="第1希望日時間" class="form-child1" children=":希望時間を選択して下さい,9：00,9：30,10：00,10：30,11：00,11：30,12：00,12：30,14：30,15：00,15：30,16：00,16：30,17：00,17：30,18：00,18：30,19：00,19：30" post_raw="true"]
</dd>

jQuery(function($){

$("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい
var fDate1 = $("input[name='第1希望日']").datepicker('getDate');
if (fDate1 !== null) { 
    fDate1 instanceof Date; 
    var youbi1 = fDate1.getDay();  /**********曜日を0から6の整数で取得**************/
}
	if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/
           $('.form-child1').children.remove(":contains(',18：00,18：30,19：00,19：30')");    
       }
});

試したこと

.removeをつかえば、文字列から土日の時刻を削除できる！と思ってやってみたのですが、なかなか反映されずだめでした。

１
$('.form-child1').remove(":contains(,18：00,18：30,19：00,19：30)");

2
$('.form-child1').children.remove(":contains(',18：00,18：30,19：00,19：30')");

3
$('.form-child1')$('.children').remove(":contains(',18：00,18：30,19：00,19：30')");

補足情報（FW/ツールのバージョンなど）

WPバージョン 6.1.1

よろしくおねがいいたします

Answer 1

スマートではないと思うのですが、いただいたアドバイスも参考にして
曜日によって変動する時刻を　.hide　と .show　をつかってなんとか実現できました。

<dt><span class="nini">任意</span>第1希望日時</dt>
<dd class="d_flex">
希望日 [mwform_text name="第1希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ]
 時間 
[mwform_select name="第1希望日時間" class="form-child1" children=":希望時間を選択して下さい,9：00,9：30,10：00,10：30,11：00,11：30,12：00,12：30,14：30,15：00,15：30,16：00,16：30,17：00,17：30,18：00,18：30,19：00,19：30" post_raw="true"]
</dd>

<script>

jQuery(function($){

$("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい
var fDate1 = $("input[name='第1希望日']").datepicker('getDate');
if (fDate1 !== null) { 
    fDate1 instanceof Date; 
    var youbi1 = fDate1.getDay();  /**********曜日を0から6の整数で取得**************/
}
	if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/
           $('select.form-child1').children('option[value=18：00],option[value=18：30],option[value=19：00],option[value=19：30]').hide();
     }else{
	  	　　$('select.form-child1').children('option[value=18：00],option[value=18：30],option[value=19：00],option[value=19：30]').show();
	 }
});
});/****終了*****/

</script>

Answer 2

JavaScript や jQuery で操作する場合は、Webブラウザで HTMLがどのように表示されているのかを考えましょう。

おそらく

<select name="第1希望日時間" class="form-child1">
<option value="" selected='selected'>希望時間を選択して下さい</option>
<option value="9：00" >9：00</option>
(以下略)
</select>

のような感じではないでしょうか

---

上記のフォーム項目を jQuery で削除するなら select の option を削除することになるので、

$('select.form-child1').children('option[value=19：30]').remove();

のような感じでどうでしょうか。

---

コメントへの返信

追加する項目がすでにあるかを判断して追加処理するのが良いのではないでしょうか。
例:

if(!($('select.form-child1 option[value=19：30]').length())){
項目がない場合の追加処理を書く
}

Comments

[higashi]

CHERRY様　ご回答ありがとうございました。
まさに、私が思っていた形になりました。

PHP
<dt class="b_g"><span class="nini">任意</span>第1希望日時</dt>
<dd class="d_flex">
希望日
<input type="text" name="第1希望日" size="15" value="" placeholder="希望日を選択して下さい" />
時間
<select name="第1希望日時間" class="form-child1">
<option value="" selected='selected'>希望時間を選択して下さい</option>
<option value="9：00" >9：00</option>
<option value="9：30" >9：30</option>
<option value="10：00" >10：00</option>
<option value="10：30" >10：30</option>
<option value="11：00" >11：00</option>
<option value="11：30" >11：30</option>
<option value="12：00" >12：00</option>
<option value="12：30" >12：30</option>
<option value="14：30" >14：30</option>
<option value="15：00" >15：00</option>
<option value="15：30" >15：30</option>
<option value="16：00" >16：00</option>
<option value="16：30" >16：30</option>
<option value="17：00" >17：00</option>
<option value="17：30" >17：30</option>
<option value="18：00" >18：00</option>
<option value="18：30" >18：30</option>
<option value="19：00" >19：00</option>
<option value="19：30" >19：30</option>
</select>
</dd>

js
jQuery(function($){
$("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい
var fDate1 = $("input[name='第1希望日']").datepicker('getDate');
if (fDate1 !== null) {
fDate1 instanceof Date;
var youbi1 = fDate1.getDay();
}
if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/
$('select.form-child1').children('option[value=18：00],option[value=18：30],option[value=19：00],option[value=19：30]').remove();
}
});
});

ただ、いざ設定してみたところヌケがありまして、
土曜か日曜を選択したあとに、平日を選択しなおすとremoveで取り除いた時間が出てこない　という私的（jsをあまり分かっていない）には想定外の結果でした。
.append　というのをつかって時刻を付け加える　というのを考えたのですが、平日を何回もクリックすると無限に増えてしまうし、どうしようかと思っています。

それなら、removeはやめて
平日はこの時刻のセット（9:00～19:30）
土日はこの時刻のセット（9:00～17:30）
という形で表示するのがベストなのかと思ったのですが、phpへの挿入（表示）方法が探しきれませんでした。

なにか上記以外でも良い方法があったらご教授いただけたら助かります。
よろしくおねがいいたします

[higashi]

CHERRYさま

貴重なアドバイスとヒントをありがとうございました。
ただ、私にはいただいたアドバイスが理解できず、違う方法を探して自分なりに見つけて無事解決することができました。