使用从 php 获取的数据动态删除 div 中的选择表单字段答案

【问题标题】：Dynamically remove select form fields inside divs with data taken from php使用从 php 获取的数据动态删除 div 中的选择表单字段
【发布时间】：2011-07-22 08:04:48
【问题描述】：

我有一个表单，其中包含动态生成的选择字段以及从 php 中获取的选项（所有选择都相同）。 “添加”按钮可以正常工作，但“删除”按钮不能正常工作，它不会删除所有内容，如果再次添加，它会低于理想位置。

这是我的代码：

<script type="text/javascript">
//<![CDATA[ 
$(function(){
var counter = 1;

$("#addButton").click(function () {

if(counter>10){
        alert("Only 10 textboxes allow");
        return false;
}   

var select = $('<select>').attr({id:'select'+counter,name:'select'+counter});

$.ajax({
url: 'selects.php',
dataType: "html",
success: function(data) {
select.html(data);
}
});        

select.appendTo("#TextBoxesGroup");
$("#TextBoxesGroup > select").wrap ( function () {
return '<div id="wrap_' + this.id + '"></div>';
} ); 
counter++;
});

$("#removeButton").click(function () {
 if(counter==1){
      alert("No more textbox to remove");
      return false;
 }   

 counter--;

     $("#wrap_" + counter).remove();
     $("#select" + counter).remove();

 });

});
//]]> 
</script>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='text' id='textbox1' >
</div>
<div id="TextBoxDiv2">
    <label>Textbox #2 : </label><input type='text' id='textbox2' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>

这是select.php生成的html代码：

<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>

【问题讨论】：

标签： php jquery forms select

【解决方案1】：

当您返回时问题会出现

return '<div id="wrap_' + this.id + '"></div>'

this.id 是选择的 id

但是当你删除时

 $("#wrap_" + counter).remove();

尝试删除

  $("#wrap_select" + counter).remove();

因为你的 div 的 id 是

wrap_select+'some value' not wrap_+'some value'

【讨论】：

【解决方案2】：

正如其他2个答案所说，问题是：

$("#wrap_" + counter).remove();

改成：

$("#wrap_select" + counter).remove ();

为了匹配 wrap-div 的创建方式。

See it in action at jsFiddle.

【讨论】：

【解决方案3】：

selects 得到 id 'select'+counter，wrappers 得到 id 'wrap_' + this.id，this.id 是，如果我早上不太累的话，和柜台不一样。

既然你这样做了

 $("#wrap_" + counter).remove();
 $("#select" + counter).remove();

您没有移除包装器。

【讨论】：

正确描述了问题，但没有添加修复！
@Brock Adams，当然，但在这种情况下，我认为如何纠正它很清楚。
是的，你我都很清楚，但并不是所有的读者都到了那个地步。只是说......缺少一条线可能会使您失去投票权。