Question

我可以添加字段，但无法删除它们。谁能告诉我我做错了什么？

jQuery的：

var FileInputsHolder    = $('#AddFileInputBox'); //Element where additional file inputs are appended
var MaxFileInputs       = 3; //Maximum number of file input boxs
// adding and removing file input box
var i = $("#AddFileInputBox div").size() + 1;

$("#AddMoreFileBox").click(function () {
    if (i < MaxFileInputs) {
        $('<h1>Patient-' + i + '</h1><div class="left-change" style="width:450px;"><div class="feild"><input type="text" id="name" name="name" placeholder="FULL NAME" /><span id="val_name" class="val_error"></span> </div><div class="feild"><input type="text" name="phone" id="phone" placeholder="PHONE" /><span id="val_phone" class="val_error"></span> </div><div class="feild"> <input type="text" name="email" id="email" placeholder="EMAIL" /> <span id="val_email" class="val_error"></span> </div>  <div class="feild"><span id="val_selectAnIV" class="val_error"></span><div class="dd-wrapper-select"><select id="selectAnIV" name="selectAnIV" value="select"><option value="-1">SELECT AN TREATMENT</option><option>Option-1</option><option>Option-2</option><option>Option-3</option><option>Option-4</option></select></div></div><p> <a href="#" id="remScnt">sample</a></p></div>').appendTo(FileInputsHolder);
        i++;
    }
    return false;
});
$("#remScnt").click(function () {
    alert('wprlog');
    if (i > 2) {
        $(this).parents('div').remove();
        i--;
    }
    return false;
});

HTML：

<div class="feild no-bor alignleft"> <span class="add-more"><a href="#" id="AddMoreFileBox">+ Add a Patient</a></span> </div>

Answer 1

<强> DEMO

不得不重写你的代码：

var FileInputsHolder = $('#AddFileInputBox'); //Element where additional file inputs are appended
var MaxFileInputs = 3; //Maximum number of file input boxs
// adding and removing file input box
var i = $("#AddFileInputBox div").size() + 1;

$("#AddMoreFileBox").click(function () {
    console.log(i);
    if (i < MaxFileInputs) {
        $('<div class="patient-container"><h1>Patient-' + i + '</h1><div class="left-change" style="width:450px;"><div class="feild"><input type="text" id="name" name="name" placeholder="FULL NAME" /><span id="val_name" class="val_error"></span> </div><div class="feild"><input type="text" name="phone" id="phone" placeholder="PHONE" /><span id="val_phone" class="val_error"></span> </div><div class="feild"> <input type="text" name="email" id="email" placeholder="EMAIL" /> <span id="val_email" class="val_error"></span> </div>  <div class="feild"><span id="val_selectAnIV" class="val_error"></span><div class="dd-wrapper-select"><select id="selectAnIV" name="selectAnIV" value="select"><option value="-1">SELECT AN TREATMENT</option><option>Option-1</option><option>Option-2</option><option>Option-3</option><option>Option-4</option></select></div></div><p> <a href="#" class="remScnt">sample</a></p></div></div>').appendTo(FileInputsHolder);
        i++;
    }
    return false;
});
$(document).on("click", ".remScnt", function (e) {
    alert('wprlog');
    if (i > 1) {
        $(this).closest('.patient-container').remove();
        i--;
    }
    console.log(i);
    return false;
});

HTML：

<div class="feild no-bor alignleft"> <span class="add-more"><a href="#" id="AddMoreFileBox">+ Add a Patient</a></span> 
</div>
<div id="AddFileInputBox"></div>

Answer 2

您正在创建许多具有相同ID（remScnt）的标记<a>。您可以使用jquery On动态附加删除处理程序

检查jquery文档http://api.jquery.com/on/并尝试制作类似

的内容

$("#someConteiner").on('click','.button-to-delete',function () {
  //code
});

Answer 3

尝试使用元素的类删除。

$（“＃remScnt”）。click（function（）{

    $('.feild').remove();

}

jquery动态添加和删除表单字段

3 个答案: