once i select an item from dropdown, the item will be placed inside
the code for html and javascript are as below
<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>
now i need to remove the items when i click remove link which will trigger removeItem function, how can i do this action.Had try many way but didn't work.Thanks
$(".options").on('click', 'a', function (e) {
$(this).closest('li').remove();
e.preventDefault();
});
Another small thing: you can use $("option:selected", this)
. this
does not need to be in a selector.
You can do it this way,
$("#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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.