Question

我有以下问题。在按钮上单击我在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>

这是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)

所有这些代码的作用是，在按下添加按钮时从上方生成ul。每个ul都有一些输入和一个删除按钮我想要的是，当按下ul中的删除按钮时，ul将被删除。事实是，我不知道如何为每个ul创建一个唯一的ID，以便我知道要为删除功能提供哪一个。

Answer 1

你实际上根本不需要ID。使用 jQuery ，您可以找到相对于每个单击的删除按钮的父ul。使用此：

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

或者，您可以使用以下行在DOM树中手动上升两个级别（到ul）：

    $(this).parent().parent().remove(); //go two levels up the DOM tree to the <ul>

请注意，我使用$("#station").on("click",".remove_station",function(){（委托事件），
代替$(".remove_station").click(function(){（直接事件）这是必要的，因为事件处理程序仅绑定到创建事件处理程序时页面上存在的元素 （read this for more info）。

因此，当您使用直接事件处理程序时，只有在创建该事件处理程序时已存在于页面中的类.remove_station的元素才会执行该函数以删除{ {1}}。

但是当您使用委托事件处理程序时，事件处理程序绑定到ul。所以现在当你单击一个删除按钮时，#station会注册该事件，并从那里搜索导致该事件的元素。这样，您的事件处理程序也可以在创建事件处理程序后添加的#station上运行（只要当时存在ul）。

参见示例：

#station

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

（小提琴：http://jsfiddle.net/rgwtcvsj/1/ ）

这比使用唯一ID更有效，更灵活。

但如果你真的想使用一个唯一的ID，我会这样做：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="station"> <ul> <li><input type="text" class="small" name="call_letters" maxlength="5" value="something" /></li> <li> <select name="am_fm" class="vsmall"> <option value="1">AM</option> <option value="2">PM</option> </select> </li> <li> <select name="station_state" style="margin-left:-14px" class="vsmall"> <option value="something">something</option> </select> </li> <li><input type="text" class="small" style="margin-left:-15px;" name="wattage" maxlength="6" value="something" /></li> <li> <select name="programming_format" id="programming_format" > <option value="something">something</option> </select> </li> <li><input type="text" class="small" name="transmission_city" maxlength="20" value="something" /></li> <li> <select name="major_metropolitan_area" id="major_metropolitan_area"> <option value="something">something</option> </select> </li> <li><button class="simulcast">Simulcast</button></li> <li><button class="remove_station">Delete</button></li> </ul> </div>

<button class="remove_station" onclick="remove('id#1')">Delete</button>调用onclick="remove('id#1')"函数，提供remove()的ID作为参数。

因此，当您生成ul时，您必须为ul提供相同的ID：ul。

在这个例子中，它是所有文字字符串，但自然你必须使用javascript生成一个唯一的ID（从你的代码我可以看到你熟悉这个原理）。

我只想使用变量<ul id="id#1">来存储数字，从var idNum开始。

当您创建新的0时，请执行此操作<ul> （我不确切知道你是如何设置创建代码的，但是你明白了;你将变量'<ul id="id#'+idNum+'">'插入到ID字符串中。）

在你的add-function结束时，你增加了ID-num：idNum。这样，每个idNum++;都有一个唯一的ID。

但正如我所说，这实际上并不是最优的，因为现在你必须将这个函数调用放在你的HTML中，你需要一个全局变量来存储ID-num，你需要在真正的时候给出ul的ID它没有必要......许多额外的代码和内存使用会使你的脚本变得更糟。

Jquery - 如何为生成的ul添加唯一ID，以便可以唯一地删除它们

1 个答案: