刪除克隆的事件jQuery

Question

我在字段集中添加事件，盡管可以添加它們，但不確定如何編寫正確的函數將其刪除。 我有使用javascript的程序，但被要求使用JQuery編寫它，似乎無法使其正常工作。 我研究的所有示例似乎都不適用於我的原始克隆功能，該功能在其中建立了刪除按鈕。 這些字段集也重復了，而我已經有適用於此的代碼，只需要一點有關此remove事件功能的幫助。

這是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>

Answer 1

• 將刪除按鈕onclick更改為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();