button в динамическом добавлении полей формы jQuery

Question

Подскажите как сделать что бы кнопка "Добавить тариф" появлялась ниже выводимых input, то есть сейчас она фиксирована в верхней части контейнера.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id=group-template type=text/html>
<section class=group data-i={{g}}>
<p>
<label for=g-{{g}}>{{g}}.</label>
<input type=text id=g-{{g}} />
<input type=text id=d-{{g}} />
<input type=text id=e-{{g}} />
<button class=remove-group>Удалить тариф</button>
</p>
</section>
</script>


<script type="text/javascript">
$(document)

.on('click', ".container .add-group", function() {
var container = $(this).closest(".container");
container.append(
$("#group-template").html()
.replace(/\{\{g\}\}/g, container.children(".group").last().data("i") + 1 || 2)
);
})

.on('click', ".container .remove-group", function() {
$(this).closest(".group").remove();
});
</script>


<div class=container>
<button class=add-group>Добавить тариф</button>
</div>

Answer 1

Можно использовать prepend вместо append

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id=group-template type=text/html>
<section class=group data-i={{g}}>
<p>
<label for=g-{{g}}>{{g}}.</label>
<input type=text id=g-{{g}} />
<input type=text id=d-{{g}} />
<input type=text id=e-{{g}} />
<button class=remove-group>Удалить тариф</button>
</p>
</section>
</script>


<script type="text/javascript">
$(document)

.on('click', ".container .add-group", function() {
var container = $(this).closest(".container");
container.prepend(
$("#group-template").html()
.replace(/\{\{g\}\}/g, container.children(".group").last().data("i") + 1 || 2)
);
})

.on('click', ".container .remove-group", function() {
$(this).closest(".group").remove();
});
</script>


<div class=container> 
<button class=add-group>Добавить тариф</button>
  </div>

Answer 2

Я доработал через .append путем вынесения вывода данных в отдельный <div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id=group-template type=text/html>
  <section class=group data-i={{g}}>
    <p>
      <label for=g-{{g}}>{{g}}.</label>
      <input type=text id=g-{{g}} />
      <input type=text id=d-{{g}} />
      <input type=text id=e-{{g}} />
      <button class=remove-group>Удалить тариф</button>
    </p>
  </section>
</script>


 <script type="text/javascript">
        $(document)
        
        .on('click', ".add-group", function() {
  var con = $(this).closest(".con");
  $( ".con" ).append( 
    $("#group-template").html()
    .replace(/\{\{g\}\}/g, $( ".con" ).children(".group").last().data("i") + 1 || 1)
  );
})

.on('click', ".remove-group", function() {
  $(this).closest(".group").remove();
});
    </script>
    
    


    
    <div class=container>
        <div class=con>
        </div>
    <button class=add-group>Добавить тариф</button>
    </div>

БЛОГ НА HUSL

button в динамическом добавлении полей формы jQuery

Ответы (2 шт):