javascript - 追加并更改 div 后删除 div

Question

所以基本上我有这个表单，我希望用户能够向表单添加另一个字段，并扩展字段以获得更多选项。

要轻松尝试此处的代码，请使用 JSFiddle: http://jsfiddle.net/LH8sd/6/

目前没有任何效果，我需要做的是能够单击箭头，以便出现该字段的其他选项以及删除行的能力。

如果您要查看 JSFiddle，由于某种原因，如果我不从外部包含我的 JS 文件，它就无法工作，因此您也可以查看 about_settings.js 来查找错误。

这是我的 JS 代码，与我想要的内容相关联:

var count = 1;

function addRow() {
    if (count < 5) {
        $('#Rows').append('<div id="form-' + count + '"><a href="#"><div class="workedu_right" id="workedu_right_' + count + '" onclick="workEduShow();"></div></a><input type="text" name="workedu" placeholder="School name or work name " /> <ul class="workedu_buttons"><a href="javascript:void(0);"><li class="workedu_minus" onclick="removeRow();"></li></a><a href="javascript:void(0);"><li class="workedu_plus" onclick="addRow();"></li></a></ul><div class="global_hide" id="workedu_hide_' + count + '"><input type="text" name="title" placeholder="Title etc. Engineer, Student" /><br /></div></div>');
        count++;
    } else {
        alert("Limit reached!");
    }
}

function removeRow() {
    $newEl.on("click", function () {
        $(this).remove();
    });
    count--;
}

function workEduShow() {
    $('#workedu_right_' + count).toggleClass("workedu_down");
    $('#workedu_hide_' + count).slideToggle(250);
}

Answer 1

在追加新行时，通过 removeRow 函数传递 count 值，这样您就可以删除唯一的行。

// pass count value while appending

<li class="workedu_minus" onclick="removeRow('+count+');"></li> 


function removeRow(ele) {

$("#form-"+ele).remove(); // remove the specific div 
count--;
}

Demo