Question

选择数字（您可以选择任意次数）：

<select name="number_selection" method="post" id="number_selection" >
   <option value="0">0</option>
   <option value="1">1 </option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
 </select>
 <input type="button" value="Select" id="select_button"/> 


  <div id="feedback"> </div>

这是我选择和取消选择的jquery：

 $('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').append(gs + '  ' + '<input type="button" value="Remove" id="gs_remove" />' + '<br>');

});

$('#gs_remove').click(function(){
(this).remove();
});

我可以选择选项，但无法使用“删除”按钮删除选项。请帮助

Answer 1

而不是重复ID（gs_remove）重复类并使用事件委派并将#number_selection值括在span内，如下所示： - < / p>

$('#select_button').click(function(){
   var gs= $('#number_selection').val();
   $('#feedback').append('<span>' + gs + '</span>' + '  ' + '<input type="button" value="Remove" class="gs_remove" />' + '<br>');
});

$('#feedback').on('click','.gs_remove',function(){
   $(this).prev('span').remove();
   $(this).next('br').remove();
   $(this).remove();  // use '$' in selector
});

Fiddle

当您在#feedback中添加一些数据时，您正在重复使用 ID＆＃39; s gs_remove 的按钮，这是不正确的，您在页面上不能有多个元素相同的id所以请使用class，如上所示。

Answer 2

我认为您需要以下代码

您还可以在jQuery中使用.on将事件添加到新元素

我使用onclick事件调用javascript函数

＆＃13;

<select name="number_selection" id="number_selection" >
        <option value="0">0</option>
        <option value="1">1 </option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <input type="button" value="Select" id="select_button"/>


    <div id="feedback"> </div>

    <script>
        function removeMe(obj){
            $(obj).parent().remove();
        }

        $('#select_button').click(function(){
            var gs= $('#number_selection').val();
            $('#feedback').append('<div>' + gs + '  ' + '<input type="button" value="Remove" onclick="removeMe(this);"/>' + '<br></div>');

        });

    </script>

＆＃13;

在删除按钮

中使用jQuery而不是onclick事件

＆＃13;

<select name="number_selection" id="number_selection" >
    <option value="0">0</option>
    <option value="1">1 </option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<input type="button" value="Select" id="select_button"/>


<div id="feedback"> </div>

<script>

    $('#feedback').on('click', '.remove-button', function(){
        $(this).parent().remove();
    });


    $('#select_button').click(function(){
        var gs= $('#number_selection').val();
        $('#feedback').append('<div>' + gs + '  ' + '<input type="button" value="Remove" class="remove-button"/>' + '<br></div>');

    });

</script>

＆＃13;

带删除按钮的多选选项无法删除项目

2 个答案: