Javascript 用delete重复html控件的正确方法是什么

我正在尝试制作一个转发器html文本框控件，该控件将在其下添加另一个带有删除btn的字段。“+添加更多”工作正常，但删除btn也在其下添加了更多控件

我想知道实现它的正确方法

$（函数（）{
$（'.btn添加电话'）。单击（函数（）{
var sInputGroupPhoneHtml=（'WorkHomeMobileOther'）；
$（this.append（sInputGroupPhoneHtml）；
});
$（'.btn添加电子邮件'）。单击（函数（）{
var sInputGroupEmailHtml=（'WorkPersonalOther'）；
$（this.append（sInputGroupEmailHtml）；
});
$（'.input group email remove'）。单击（函数（）{
$（this.parent（）.remove（）；
});
jQuery（“.toggleControlsPhone a”）。单击（函数（）{
jQuery（“.showPhoneControls”）.toggle（）；
});
jQuery（“.toggleControlsMail a”）。单击（函数（）{
jQuery（“.showEmailControls”）.toggle（）；
});
});
div.input-group-option:最后一个子input.form-control{
边框右下半径：3px；
边框右上角半径：3px；
}
div.input-group-option span.input-group-addon-remove{
光标：指针；
}
div.input-group-option{
利润底部：3倍；
}

电话
工作
家
可移动的
其他
+添加更多
我看到两个问题：

当您附加
sInputGroupEmailHtml
时，您将它附加到
的
中，以将处理程序绑定到
#addPhoneMore
，而不是按钮本身，这样处理程序即使在动态生成的子项上也会启动。我还使用来查找单击按钮的
.form组
。看


$（函数（）{
$（'.btn添加电话'）。单击（函数（）{
var sInputGroupPhoneHtml=（'WorkHomeMobileOther'）；
$（this.parent（）.append（sInputGroupPhoneHtml）；
});
$（“#phoneAddMore”）。在（'单击'，'上。输入组phone remove'，函数（）{
$（this）.closest（'.form group'）.remove（）；
});
});
div.input-group-option:最后一个子input.form-control{
边框右下半径：3px；
边框右上角半径：3px；
}
div.input-group-option span.input-group-addon-remove{
光标：指针；
}
div.input-group-option{
利润底部：3倍；
}

电话
工作
家
可移动的
其他
+添加更多