- 締切済み
datalistのoptionの削除はできますか？
こんにちは。 今、htmlとJavascriptでinput要素の入力欄に入力した値を追加ボタンを押すとdatalistの入力候補に追加され、削除ボタンを押すと入力候補から値を削除するソースを作成しています。 入力候補から指定した値を削除するソースの書き方で困っています。 selectのoptionを削除する方法はネットでもたくさん紹介されていますが、datalistのoption削除はありませんでした。 方法をご存知の方はやり方をご教授ください。 よろしくお願いします。
- kinka2000
- お礼率45% (53/117)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE html> <meta charset="utf-8"> <title>datalistのoptionを間引く</title> <style> </style> <body> <input type="search" name="q" autocomplete="on" list="keywords"> <input type="button" value="Delete" data-delete-for="keywords"> <datalist id="keywords"> <option value="Windows"> <option value="macOS"> <option value="Linux"> </datalist> <script> function handler ({target}) { if (target.hasAttribute ('data-delete-for')) {//要素に対象の属性があるか？ let doc = target.ownerDocument, key = target.getAttribute ('data-delete-for'), search = doc.querySelector (`input[list="${key}"]`); //data-delete-forが示すlist属性が同じinput要素を探す if (search) { let datalist = doc.getElementById (search.getAttribute ('list')), //datalist要素 val = search.value; //削除する値 if (datalist) { Array.from (datalist.options) .filter (op => op.value === val) //option要素群から同じ値のもの .forEach (op => datalist.removeChild (op)); //削除する search.value = ''; } } } } document.addEventListener ('click', handler, false); /* 削除するボタンとinput要素の関係がdata-delete-forと関連 づけられていれば複数のタグが対象になる なんだかゴールポストが動く質問が多いのですが、これは大丈夫だよね。 */ </script>
お礼
ありがとうございます。 参考にさせていただきます。