option:selectedで想定の値が取れない

質問

こんにちは。
今、htmlとJavascriptでinput要素の入力欄に入力した値を追加ボタンを押すとdatalistの入力候補に追加され、削除ボタンを押すと入力候補から値を削除するソースを作成しています。
Javascriptの方でテキスト欄に表示されている値を取得したいときはoption:selectedを指定するといいはずですが、リストの何を表示してもリストの一番上の値が削除されてしまいます。
datalistの中にselectを書いているせいなのかとも思いますが、分かりません。
どなたかご教授ください。お願いします。

ざっくりとソースを書くと以下のようになります。
【HTML】
<input type="text" value="" list="alphabet">
<datalist id='alphabet'>
<select id='alphabet'>
<option value='ABC'></option>
<option value='DEF'></option>
<option value='GHI'></option>
<option value='JKL'></option>
</select>

回答No.1

Proof4

テキスト欄に表示されている値を、テキストボックスのvalueから取得してはいかがでしょうか。
具体的にはテキストボックスに適当なidをつけた上で、
document.getElementById("テキストボックスのid").value
とすれば想定の値が取れるかと思います。

補足

ありがとうございます。
確かにその方法でも想定の値は取れるのですが、removeで上手く削除できなかったので、できればoption:selectedで指定したいと思っているのですが、無理なのでしょうか？