목록 상자에 닫기 버튼을 추가하는 방법

Question

텍스트 상자를 사용하여 도시 이름을 목록 상자에 도시 이름을 추가하려면 닫기 버튼을 추가하고 목록 상자에서 쉽게 도시 이름을 제거 할 수 있습니다. 더 나은 옵션에 삭제 버튼을 추가 할 수 없습니다 기분이야 내가 옵션을 선택 제거

HTML

<asp:TextBox ID="txtcity" runat="Server"></asp:TextBox> 
<asp:Button ID="btnAddcity" runat="server" Text="Add" /> 
<asp:ListBox ID="listBoxcity" runat="server"></asp:ListBox> 
<span id="spcity"></span> 

JQuery와

Answer 1

이해를 위해 이미지 아래
이다.

$("#btnAddcity").click(function() { 
 
    var txt = $("#txtcity").val(); 
 
    $('[id$=listBoxcity]').show(); 
 
    var alreadyExist = false; 
 
    $('[id$=listBoxcity] option').each(function() { 
 
    if ($(this).val() == txt) { 
 
    $("#spcity").text('City alread exists'); 
 
    alreadyExist = true; 
 
    return; 
 
    } 
 
}); 
 
if (!alreadyExist) { 
 
    $('[id$=listBoxcity]').append($('<span></span>').attr('value', txt).text(txt)); 
 
    $('[id$=listBoxcity]').append($('<a href="#" class="delete">x</a><br>')); 
 
} 
 
}); 
 

 
$(document).on('click', 'a.delete', function(event){ 
 
    $(this).prev('span').remove(); 
 
    $(this).next('br').remove(); 
 
    $(this).remove(); 
 
});

a.delete { 
 
    margin-left: 10px; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: #82854C; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    color: #fff; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td><input id='txtcity' type="text" /></td> 
 
    <td><input id='btnAddcity' type='button' value='Add' /></td> 
 
</tr> 
 
</table> 
 
<!-- <select id='listBoxcity' multiple="multiple" style='width:300px; height:100px;'> 
 

 
</select> --> 
 
<div id='listBoxcity' multiple="multiple" style='width:300px; height:100px;'> 
 
    
 
</div> 
 
    <span id='spcity'></span>

Answer 2

이 조각은 저를 위해 일하고 :

$(document).ready(function(){ 
$("#btnAddcity").click(function() { 
    var txt = $("#txtcity").val(); 
    $('[id$=listBoxcity]').show(); 
    var alreadyExist = false; 
    $('[id$=listBoxcity] option').each(function() { 
    if ($(this).val() == txt) { 
    $("#spcity").text('City alread exists'); 
    alreadyExist = true; 
    return; 
    } 
}); 
var count = 0; 
if (!alreadyExist) { 
count++; 
    $('[id$=listBoxcity]').append($('<span></span>').attr('value', txt).text(txt)); 
    $('[id$=listBoxcity]').append($('<div class="delete">x</div><br>')); 
} 

$('.delete').on('click',function(e){ 
    console.log($(this).closest('span')); 
    $(this).next('br').remove(); 
    $(this).prev('span').remove(); 
    $(this).remove(); 
    }); 
}); 

})입니다 :이 작업을 수행하려고한다면 그냥 봐