javascript - jqueryは選択したドロップダウンアイテムを削除します

Question

ドロップダウンからアイテムを選択すると、そのアイテムは内部に配置されます

以下のタグ

htmlとjavascriptのコードは以下の通りです

<select class="dropDownList" id="PersonFunction">
    <option value="">Choose</option>
    <option value="1">Vice President</option>
    <option value="2">Director</option>
    <option value="3">Secretary</option>
    <option value="4">Clerk</option>
</select>
<div class="options">
    <ul>
    </uL>
</div>

<script type="text/javascript">
$("#PersonFunction").change(function() {

    var val = $("option:selected", $(this)).text();
var opt1 = '<li id="'+ $(this).val()+'">'+val+ '<a href="#" class="launch" onclick="removeItem(event)"> remove</a></li>';

    $('.options ul').append(opt1);
});
function removeItem(event){
    disabledEventPreventDefault(event);

}
</script>

ここで、removeItem関数をトリガーする[削除]リンクをクリックしたときにアイテムを削除する必要があります。このアクションを実行するにはどうすればよいですか。多くの方法を試しましたが、機能しませんでした。ありがとう

Answer 1

$(".options").on('click', 'a', function (e) {
   $(this).closest('li').remove();
   e.preventDefault();
});

もう1つの小さなこと：を使用できます$("option:selected", this)。 thisセレクターにある必要はありません。

Answer 2

あなたはこのようにそれを行うことができます、

ライブデモ

$("#PersonFunction").change(function() {
debugger
    var val = $("option:selected", $(this)).text();
var opt1 = '<li id="'+ $(this).val()+'">'+val+ '<a href="#" class="launch" onclick="removeItem(event)"> remove</a></li>';

    $('.options ul').append(opt1);
});

$(document).on("click", ".launch", function(event){      
    $(this).closest('li').remove();
});​