我正在动态添加和删除字段。 我正在使用jquery hide show来动态加载新的textarea或删除（隐藏）
我知道append方法以及for循环，但是我在wordpress中这样做，其中textrea = wp_editor所以我不能使用append方法，因此需要添加静态html然后使用hide show。
我能够动态添加字段以及动态删除字段。
我面临的唯一问题是On delete，我希望再次出现添加字段。 简而言之：例如：我对1组有5个字段的限制，因为在小提琴中我已经显示了3个不同的组，每个组的限制为5。 当我点击“添加更多”时，对于每个组，对于该组，总共有5个字段可见但是如果我删除任何一个字段，则总数仍为4，而无添加更多。那么，如果一个字段被删除，是否有可能再次添加ADD，所以IN SHORT除非组中有五个字段ADD MORE应该在那里。
这是http://www.tutorialspoint.com/android/android_php_mysql.htm 这是示例代码
<div class="col_box">
<div class="col_3">
<div id="rwd11" class="txtara_cls">
<div class="col_txt_lft">
<textarea class="result11">aaaa</textarea>
</div>
<div class="clear"></div>
</div>
<div id="rwd12" class="txtara_cls" style="display:none;">
<div class="col_txt_lft">
<textarea class="result12">bbbb</textarea>
</div>
<div class="col_del_rght">
<a href="#" onclick="document.getElementById('rwd12').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a>
</div>
<div class="clear"></div>
</div>
<div id="rwd13" class="txtara_cls" style="display:none;">
<div class="col_txt_lft">
<textarea class="result13">cccc</textarea>
</div>
<div class="col_del_rght">
<a href="#" onclick="document.getElementById('rwd13').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a>
</div>
<div class="clear"></div>
</div>
<div id="rwd14" class="txtara_cls" style="display:none;">
<div class="col_txt_lft">
<textarea class="result14">ddddd</textarea>
</div>
<div class="col_del_rght">
<a href="#" onclick="document.getElementById('rwd14').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a>
</div>
<div class="clear"></div>
</div>
<div id="rwd15" class="txtara_cls" style="display:none;">
<div class="col_txt_lft">
<textarea class="result15">eeeee</textarea>
</div>
<div class="col_del_rght">
<a href="#" onclick="document.getElementById('rwd15').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a>
</div>
<div class="clear"></div>
</div>
<div id="hide_11" class="add_extra">
<a id="hide_1_1" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a>
</div>
<div id="hide_12" class="add_extra" style="display:none;">
<a id="hide_1_2" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a>
</div>
<div id="hide_13" class="add_extra" style="display:none;">
<a id="hide_1_3" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a>
</div>
<div id="hide_14" class="add_extra" style="display:none;">
<a id="hide_1_4" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a>
</div>
</div>
</div>
<div class="col_box">
<div class="col_3">
<div id="rwd21" class="txtara_cls">
<div class="col_txt_lft">
<textarea class="result21">ffff</textarea>
</div>
<div class="clear"></div>
</div>
<div id="rwd22" class="txtara_cls" style="display:none;">
<div class="col_txt_lft">
<textarea class="result22">ggggg</textarea>
</div>
<div class="col_del_rght">
<a href="#" onclick="document.getElementById('rwd22').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a>
</div>
<div class="clear"></div>
</div>
<div id="rwd23" class="txtara_cls" style="display:none;">
<div class="col_txt_lft">
<textarea class="result23">hhhhh</textarea>
</div>
<div class="col_del_rght">
<a href="#" onclick="document.getElementById('rwd23').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a>
</div>
<div class="clear"></div>
</div>
<div id="rwd24" class="txtara_cls" style="display:none;">
<div class="col_txt_lft">
<textarea class="result24">iiiii</textarea>
</div>
<div class="col_del_rght">
<a href="#" onclick="document.getElementById('rwd24').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a>
</div>
<div class="clear"></div>
</div>
<div id="rwd25" class="txtara_cls" style="display:none;">
<div class="col_txt_lft">
<textarea class="result25">jjjjj</textarea>
</div>
<div class="col_del_rght">
<a href="#" onclick="document.getElementById('rwd25').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a>
</div>
<div class="clear"></div>
</div>
<div id="hide_21" class="add_extra">
<a id="hide_2_1" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a>
</div>
<div id="hide_22" class="add_extra" style="display:none;">
<a id="hide_2_2" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a>
</div>
<div id="hide_23" class="add_extra" style="display:none;">
<a id="hide_2_3" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a>
</div>
<div id="hide_24" class="add_extra" style="display:none;">
<a id="hide_2_4" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a>
</div>
</div>
</div>
这是JS部分
jQuery(document).ready(function () {
jQuery('#hide_1_1').click(function() {
jQuery('#rwd12').css('display', 'block');
jQuery('#hide_11').css('display', 'none');
jQuery('#hide_12').css('display', 'block');
});
jQuery('#hide_1_2').click(function() {
jQuery('#rwd13').css('display', 'block');
jQuery('#hide_12').css('display', 'none');
jQuery('#hide_13').css('display', 'block');
});
jQuery('#hide_1_3').click(function() {
jQuery('#rwd14').css('display', 'block');
jQuery('#hide_13').css('display', 'none');
jQuery('#hide_14').css('display', 'block');
});
jQuery('#hide_1_4').click(function() {
jQuery('#rwd15').css('display', 'block');
jQuery('#hide_14').css('display', 'none');
});
jQuery('#hide_2_1').click(function() {
jQuery('#rwd22').css('display', 'block');
jQuery('#hide_21').css('display', 'none');
jQuery('#hide_22').css('display', 'block');
});
jQuery('#hide_2_2').click(function() {
jQuery('#rwd23').css('display', 'block');
jQuery('#hide_22').css('display', 'none');
jQuery('#hide_23').css('display', 'block');
});
jQuery('#hide_2_3').click(function() {
jQuery('#rwd24').css('display', 'block');
jQuery('#hide_23').css('display', 'none');
jQuery('#hide_24').css('display', 'block');
});
jQuery('#hide_2_4').click(function() {
jQuery('#rwd25').css('display', 'block');
jQuery('#hide_24').css('display', 'none');
});
});
答案 0 :(得分：0)
<form role="form" action="" method="POST">
<label>Stuff</label>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]">
<button type="button" class="remove-field">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
<script>
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
</script>
这是动态添加和删除的演示。它有助于解决此问题。