动态添加和删除字段jquery

我正在动态添加和删除字段。我使用jQuery隐藏显示动态加载新的textarea或删除（隐藏）动态添加和删除字段jquery

我知道append方法以及for循环，但因为我在wordpress中这样做textrea = wp_editor所以我不能使用append方法，因此需要添加静态html，然后使用hide show。

我能够实现动态添加字段以及动态删除字段。

我面临的唯一问题是在删除时，我希望再次出现添加字段。简而言之，例如：我有1个组的5个字段的限制，就像在小提琴中一样，我已经显示了3个不同的组，每个组的限制为5个。当我点击“添加更多”时，每个组的SO都有5个可见的字段该组但是如果我删除了该字段中的任何一个，那么总数仍然是4，并且没有添加更多内容。所以，如果一个字段被删除，是否有可能再次添加ADD，除非组中有五个字段，否则应该在那里。

这里是JS Fiddle 下面是示例代码

<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'); 
     }); 

    });

来源

2015-06-17 user930026

您可以通过在您的HTML中使用类重用您的函数，并通过克隆和追加元素而不是隐藏和显示预先存在的元素来大量减少HTML和JS的数量。 –

我面临的问题是我需要在wordpress中显示所见即所得的编辑器，如果我尝试实例化它，它不会看起来相同所以，而不是使用该方法我试图使用简单的PHP代码（只需要一个循环）生成这个html 我尝试了很多，使其工作，但惨败失败 – user930026

<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>

这是演示用于动态地添加和remove.It有助于ö解决这个问题。

来源

2015-06-17 12:31:17

我正在管理端，它允许我可以使用某些HTML集。你可以请尝试一次与上面的HTML – user930026

动态添加和删除字段jquery

回答

相关问题