Javascript jQuery存储div父id，并将其从数组中删除

我试图动态地构建输入元素，并选择添加和删除输入。 此外，我还有一个下拉列表，它使用php从我的数据库中动态构建。 当我添加输入时，我在数组中输入父id，当我删除输入时，我使用splice删除它。我添加或删除的每个框都包含多个输入

我也成功地将输入添加到数组中，并使用ajax成功地传递它们，问题是当我删除1个输入时，它会像在循环中一样删除我的所有父div

   var x = 1
var appleTestList;
var appleinputList = new Array();

$('#applePlus').click(function(e){ //on add input button click
            var wrapper         = $("#appleDinamicBox"); //Fields wrapper
            ; //initlal text box count 
            $.ajax({
            async: false,
            type: "GET",
            url: "sqlFunctrions.php",
            data: 'func=dropDownbyValue&table=test&value=Test_ID&display=Test_Name&column=Test_Type&valueBy=Apple&selectName=appleTest&chooseFrom=Test',
            success: function(msg){
                appleTestList=msg;
            }

        }); // Ajax Call

            var htmlString='';

                x++; //text box increment
                htmlString=htmlString + '<div class="seperate" id="'+x+'"><div class="col-lg-5"><label>Test Name:</label>'; 
                htmlString = htmlString + '<select name="appleTestName'+x+'" id="appleTestName'+x+'" class="form-control"><option value=\"0\">Test</option>' +appleTestList+'</select>';
                htmlString = htmlString + '</div><div class="col-lg-5"><label>Namber Of Setups</label><input class="form-control" type="text" name="appleNumOfSetups'+x+'" id="appleNumOfSetups'+x+'"></div><img src="images/minus-s.png" id="appleMinus" class="remove_field"></div>';
                $(wrapper).append(htmlString); //add input box            

                appleinputList.push(x);

                $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove();
    var id = $(this).parent().attr('id');
    alert(id);
    appleinputList.splice(appleinputList.indexOf(parseInt(id)),1);

            alert(id);

});

}

var x=1
var应用程序列表；
var appleinputList=新数组（）；
$（'#applePlus'）。单击（函数（e）{//在添加输入按钮上单击
var wrapper=$（“#applednamicbox”）；//字段包装器
；//初始文本框计数
$.ajax({
async:false，
键入：“获取”，
url:“sqlFunctrions.php”，
数据：“func=dropDownbyValue&table=test&value=test\u ID&display=test\u Name&column=test\u Type&valueBy=Apple&selectName=appleTest&chooseFrom=test”，
成功：功能（msg）{
appleTestList=msg；
}
})；//Ajax调用
var htmlString=''；
x++；//文本框增量
htmlString=htmlString+“测试名称：”；
htmlString=htmlString+“测试”+appleTestList+”；
htmlString=htmlString+“设置名称”；
$（包装器）.append（htmlString）；//添加输入框
appleinputList.push（x）；
$（包装器）。在（“单击“，”.remove_字段）上，函数（e）{//用户单击remove text
e、 preventDefault（）；$（this.parent（'div'）.remove（）；
var id=$（this.parent（）.attr（'id'）；
警报（id）；
splice（appleinputList.indexOf（parseInt（id）），1）；
警报（id）；
});
}

你能原谅我的错误吗？还有别的方法吗

谢谢，

---

Cfir.

问题是您绑定了新的

$（包装器）。每次单击
#applePlus
（这会导致多个处理程序调用）时，在（“单击“，”。删除\u字段”

处理程序。将此代码移出

#applePlus

单击处理程序

---

可能是这一行：$（this）.parent（'div'）.remove（）；我会在

中添加一个
数据targetid=x
。remove_字段

元素并将其显式拉出（

id=$（this）.data（'targetid'）

）在处理程序中，而不是使用父关系。您是否考虑过使用类似Knockout的模板库来构建动态视图？值得一试：谢谢，这正是答案：）

$('#applePlus').click(function()
{
    var wrapper = $("#appleDinamicBox"); //Fields wrapper

    ...

    appleinputList.push(x);
});

$("#appleDinamicBox").on("click", ".remove_field", function(e){ //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    var id = $(this).parent().attr('id');
    appleinputList.splice(appleinputList.indexOf(parseInt(id)),1);
});