注意：

Question

我从下拉列表中选择了一个按钮，并从下拉列表中添加了一个按钮。

<select id="cbo-names">
    <option value="1">John</option>
    <option value="2">james</option>
    <option value="3">Bob</option>
    <option value="4">Mary</option>
</select>
<button onclick="add_parameter()">Add</button>

单击该按钮时，它会将所选项目添加到div然后执行ajax请求

//code for button
function add_parameter()
{
    var new_span = '<span id="span-read-'+$('#cbo-names').val()+'" class="label label-success" data-value="'+$('#cbo-names').val()+'">';
    new_span    += $('#cbo-names').text();
    new_span    += '    <button onclick="remove_object(\'span-read-\'+$('#cbo-names').val()+'\')></button>';
    new_span    += '</span>';

    $('#div-read').html($('#div-read').html() + new_span);

    fetch_records();
}

示例

<div id="div-read">
    <span id="span-read-1" data-value="1">John</span>
    <span id="span-read-2" data-value="2">James</span>
    <span id="span-read-3" data-value="3">Bob</span>
</div>

现在，这样可以正常工作，但是一旦我开始从列表中删除一个范围，已经删除的范围仍然会被使用，尽管它已经不存在了。

function remove_object(id)
{
    $(id).remove();

    fetch_records();
}

以及我如何阅读我的ajax函数

//ajax call
function fetch_records();
{
    var arr_names = [];
    //this part is the problem.
    $('#div-read span').each(function(index, element)
    {
        arr_names.push($(this).attr('data-value'));
        //alert($(this).attr('data-value'));
    });        

    //more ajax code
}

只是为了确定，我甚至通过警报来检查价值，它仍在那里。

非常感谢任何帮助。

注意：

代码比这长，我尽可能简单，所以可能会有一些问题/语法错误，但真正的问题是在执行ajax请求之前读取div，我确保该部分是完全一样。

添加了小提琴

https://jsfiddle.net/ysLk6178/

Answer 1

尝试FIDDLE，

我更新了标记以传递对象而不是span

的id

onclick="remove_object(this)"

下面是add_parameter功能

的更新代码

function add_parameter() {

    var new_span = '<span id="span-read-' + $('#cbo-names').val() + '" class="label label-success" data-value="' + $('#cbo-names').val() + '">';
    new_span += $('#cbo-names').text();
    new_span += '<button onclick="remove_object(this)">Remove this</button>';
    new_span += '</span>';

    $('#div-read').html($('#div-read').html() + new_span);

      fetch_records();
  }

然后更新remove_object函数以根据需要工作

function remove_object(obj)
 {
      $(obj).closest('span').remove();
      fetch_records();
 }

修改

试试反映现有跨度ID的FIDDLE

希望它适合你

Answer 2

我发布了我的答案，虽然你已经接受了另一个答案，但我已经完成了代码...... :)。

主要区别在于函数add-parameter。例如。 click的事件处理程序未直接添加，但会被div捕获并委派给button。

$(function() {
    $('#div-read').on("click", "button", function() {
        var $closesSpan = $(this).closest("span");
        remove_object($closesSpan);
    })
});

function add_parameter() {
    var spanId = "span-read-" + $('#cbo-names').val();
    var spanText = $("#cbo-names option:selected").text();
    var $newSpan = $("<span>", { "id": spanId, "class": "label label-success", "data-value": spanId, "text": spanText });
    var $newButton = $("<button>", {"text": "remove"});

    $newSpan.append($newButton);
    $('#div-read').append($newSpan);

    fetch_records();
}

function remove_object($toRemove) {
    $toRemove.remove();

    fetch_records();
}

function fetch_records() {
    var arr_names = [];

    $('#div-read span').each(function (index, element)
    {
        arr_names.push($(this).attr('data-value'));
    });       

    //more ajax code
}

Js-fiddle here。

删除的跨度仍然存在

注意：

添加了小提琴

2 个答案: