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

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

// 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

Answer 2

尝试将count值作为参数发送给函数并根据它删除div。

根据您的要求更新小提琴。看看 fiddle

Answer 3

我认为$ newEl没有引用新创建的元素。试试

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

追加和更改div后删除div

3 个答案: