Javascript Jquery-如何将唯一id添加到生成的ul'；s，以便可以唯一地删除它们

我有以下问题。单击按钮后，我会在

div

中生成此命令：

<ul id="">
    <li><input type="text" class="small" name="call_letters" maxlength="5" value="{{ Input::old("call_letters") }}" /></li>

    <li>
        <select name="am_fm" class="vsmall">
            <option value="1" @if(Input::old('am_pm') == 1) {{ 'selected="selected"' }}@endif>AM</option>
            <option value="2" @if(Input::old('am_pm') == 2) {{ 'selected="selected"' }}@endif>PM</option>
        </select>
    </li>

    <li>
        <select name="station_state" style="margin-left:-14px" class="vsmall">
            @foreach($states as $s)
                <option value="{{ $s->id }}" @if(Input::old('station_state') == $s->id) {{ 'selected="selected"' }}@endif>{{ $s->name }}</option>
            @endforeach
        </select>
    </li>

    <li><input type="text" class="small" style="margin-left:-15px;" name="wattage" maxlength="6" value="{{ Input::old("wattage")  }}" /></li>

    <li>
        <select name="programming_format" id="programming_format" >
            @foreach($programming_format as $pf)
                <option value="{{ $pf->id  }}" @if(Input::old('programming_format') == $pf->id ) {{ 'selected="selected"' }} @endif>{{ $pf->name  }}</option>
            @endforeach
        </select>
    </li>

    <li><input type="text" class="small" name="transmission_city" maxlength="20" value="{{ Input::old('transmission_city') }}" /></li>

    <li>
        <select name="major_metropolitan_area" id="major_metropolitan_area">
            @foreach($metropolitan_area as $ma)
                <option value="{{ $ma->id }}" @if(Input::old('major_metropolitan_area') == $ma->id ) {{ 'selected="selected"' }} @endif>{{ $ma->name  }}</option>
            @endforeach
        </select>
    </li>

    <li><button class="simulcast">Simulcast</button></li>
    <li><button class="remove_station">Delete</button></li>
</ul>

是
颗粒物


@foreach（$s）
id）{{'selected=“selected”}@endif>{{{$s->name}
@endforeach



@foreach（$pf格式）
id）{{'selected=“selected”}@endif>{{{$pf->name}
@endforeach



@foreach（大都市区为$ma）
id）{{'selected=“selected”}@endif>{{{$ma->name}
@endforeach

同步广播
删除

这是JS代码：

$("#add_station").click(function(e) {
    $.ajax({
        url: advoke.base_url+"/new-vendor-user/station/ajax",
        type: "post",
        datatype: "html",
        data: '',
        beforeSend: function() {
            $('#ajax-loading').show();
        }
    }).done(function(data) {
        $('#ajax-loading').hide();
        $("#station").append(data);
    }).fail(function(jqXHR, ajaxOptions, thrownError) {
        alert('No response from server');
    });
    return false;
});
}); //<--THIS DOES NOT BELONG HERE, IT'S ONE TO MANY (note from editor - myfunkyside)

$（“#添加站”）。单击（功能（e）{
$.ajax({
url:advoke.base\u url+“/new vendor user/station/ajax”，
类型：“post”，
数据类型：“html”，
数据：“”，
beforeSend:function（）{
$（'#ajax加载'）.show（）；
}
}).完成（功能（数据）{
$（'#ajax加载'）.hide（）；
$（“#站”）。附加（数据）；
}).fail（函数（jqXHR、ajaxOptions、thrownError）{
警报（“服务器无响应”）；
});
返回false；
});
}); // 实际上你根本不需要身份证。使用jQuery，您可以找到相对于每个单击的删除按钮的父级
ul
。使用以下命令：

$("#station").on("click",".remove_station",function(){
    $(this).closest("ul").remove(); //find the first <ul> up the DOM tree
});



请注意，我使用了
$（“#station”）。在（“单击”，“删除#station”，function（）{
（委托事件），

代替
$（“.remove_station”）。单击（函数（）{
（直接事件）。

这是必要的，因为事件处理程序仅绑定到创建事件处理程序时页面上存在的元素


因此，当您使用直接事件处理程序时，只有创建该事件处理程序时页面上已经存在的类为
.remove\u station
的元素才会执行删除
ul
的功能
但是，当您使用委托事件处理程序时，事件处理程序绑定到
#station
。因此，现在当您单击删除按钮时，
#station
注册事件，并从中搜索导致事件的元素。这样，事件处理程序也将处理在事件处理程序之后添加的
ul
已创建（只要当时存在站）

见示例：


$（“#站”）。在（“单击”、“.remove#u站”上，函数（）{
$（this）.closest（“ul”）.remove（）；//查找DOM树上的第一个

//$（this）.parent（）.parent（）.remove（）；//在DOM树的两个层次上转到

})；




是
颗粒物


某物



某物



某物

同步广播
删除

您不需要每个
都有一个唯一的id。您可以使用按钮的单击处理程序中的
$（this.closest（'ul'）
）来访问
我尝试过的$（this.closest（'ul'）。remove（）；但它对你不起作用，因为它对第一个ul有效，而第一个ul没有生成，但对其余的，点击删除不起作用，它只是提交。我使用了e.preventDefault（）但只对第一个ul有效，知道为什么吗？我修改了我的答案，我更改了
$（“.remove_station”）。点击（函数（）{/code>到
$（“#站”）。点击（“点击”，“.remove_station”，function（）{
（委派事件）。这应该可以解决问题，答案中有解释。如果仍然存在问题，请告诉我。
    $(this).parent().parent().remove(); //go two levels up the DOM tree to the <ul>