Добавить и удалить поля динамически jquery

Я добавляю и удаляю поля динамически. Я использую jquery hide show для динамической загрузки новой текстовой области или удаления (скрыть)Добавить и удалить поля динамически jquery

Мне также известен метод append и для цикла, но поскольку я делаю это в wordpress, где textrea = wp_editor, поэтому я не могу использовать метод append и, следовательно, нужно добавить статический html, а затем использовать hide show.

Я могу динамически добавлять поля, а также удалять поля динамически.

Единственная проблема, с которой стоит сталкиваться, - это удалить, я хочу, чтобы поле добавления снова появилось. Короче говоря: у меня есть ограничение по 5 полям для 1 группы, как в скрипке. Я показал 3 разных группы, каждый из которых имеет предел 5. SO для каждой группы, когда я нажимаю «Добавить больше», есть всего 5 полей, видимых для эта группа, но если я удалю любое из полей, общее количество останется равным 4, а NO ADD MORE. SO, Возможно ли иметь ADD. Еще раз, если поле удалено так IN SHORT, если в группе не должно быть пяти полей в группе ADD MORE.

Вот 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 и JS здесь, повторно используя свои функции, используя классы в своем HTML, а также клонируя и добавляя элементы вместо того, чтобы скрывать и показывать уже существующие. –

Проблема, с которой я столкнулся, - мне нужно показать редактор WYSIWYG в wordpress, если я попытаюсь создать его javascript, он не выглядит так же , поэтому вместо использования этого метода я пытаюсь использовать простой PHP-код (требуется только для loop), чтобы сгенерировать этот 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

ответ

Смежные вопросы