删除克隆的事件JQuery

Remove Cloned Event JQuery

本文关键字：事件 JQuery 删除      更新时间：2023-09-27

我正在字段集中添加事件，虽然我可以添加它们，但我不确定如何编写正确的函数来删除它们。我让它用javascript编写，但被要求使用JQuery编写，似乎无法使它工作。我研究过的所有例子似乎都不适用于我原来的克隆函数，它在其中构建了一个删除按钮。字段集也重复，我已经有了相应的代码，只需要在这个删除事件函数上提供一些帮助。

这里是javascript/jquery:

var _eventCounter = 0;
var removeEventButton = $("<input></input>").attr("type", "button").attr("value", "-");
function addEvent(num)
{
    _eventCounter++;
    var c = $("#event-code-"+num).clone(true);
    c.attr("id", "event-code-"+num);
    var eventName = "s"+num+"_e["+_eventCounter+"]";
    $('#'+ eventName, c).val('')
    $("#textNumberRequired1", c).val('');
    removeEventButton.attr("onClick", "removeEvent('+c+')");
    $(c).append(removeEventButton.clone(true));
    $("#event-placeholder-"+num).append(c);
}
function removeEvent(c) {
    //$("#event-placeholder #event-code-1").remove(); 
    $(c).remove(); 
}

这是html/php:

<div id="section_placeholder">
    <div id="section_template1">
        <fieldset class="box-outline-blue">
            <legend>Section Requirements</legend>
            <h3>Number of events required:  </h3><input type="text" id="textNumberRequired1" size="8" name="numberRequired1"><br>
            <br />
            <h3>Please enter the required event codes: </h3>
            <div id="event-placeholder-1">
                <div class="eventCode" id="event-code-1">   
                    <br />Event Code: <input type="text" id = "eventCodes_section1" name="s1_e[]" size=8 > <input type="button" id="add" onClick="addEvent(1)" value="+">
                </div>
            </div>
            <br /><br />
        </fieldset>

    </div>
</div>

  • 点击后将删除按钮更改为jQuery:

    这个：removeEventButton.attr("onclick", "removeEvent("+c+")");

    至：$(removeEventButton).on("click", removeEvent);

  • 在你的event-placeholder-x div中添加一个class，删除会更容易

    <div id="event-placeholder-1" class='placeholder'>

  • 最后，当remove button收到点击时，removeEvent应该找到它的父级，然后将其删除

    这个：$(c).remove();

    至：$(this).parentsUntil('.placeholder').remove();

相关文章：