Динамическое добавление и удаление div с помощью JQuery?

Question

Я пытаюсь создать форму, которая позволяет пользователю вводить свой опыт и образование

Я хочу, чтобы пользователь мог добавлять и удалять образование или опыт.

Я в состоянии сделать это ... вид. Только проблема заключается в том, что мои новые div, которые я создаю, присоединяются к концу страницы, а не добавляются после предыдущего div.

Это мои скрипты:

$(document).ready(function() { 
     var inputs = 1; 

     $('#btnAdd').click(function() { 
      $('.btnDel:disabled').removeAttr('disabled'); 
      var c = $('.clonedInput:first').clone(true); 
      c.children(':text').attr('name', 'input' + (++inputs)); 
      $('.clonedInput:last').after(c); 
     }); 

     $('.btnDel').click(function() { 
      if (confirm('continue delete?')) { 
       --inputs; 
       $(this).closest('.clonedInput').remove(); 
       $('.btnDel').attr('disabled', ($('.clonedInput').length < 2)); 
      } 
     }); 
    }); 
    $(document).ready(function() { 

     var inputs = 1; 

     $('#btnAdd2').click(function() { 
      $('.btnDel2:disabled').removeAttr('disabled'); 
      var c = $('.clonedInput:first').clone(true); 
      c.children(':text').attr('name', 'input' + (++inputs)); 
      $('.clonedInput:last').after(c); 
     }); 

     $('.btnDel2').click(function() { 
       --inputs; 
       $(this).closest('.clonedInput').remove(); 
       $('.btnDel2').attr('disabled', ($('.clonedInput').length < 2)); 
     }); 
    }); 

Я понимаю, что это плохой форме дублировать код, как это, но я не уверен, как еще иначе сделать это так, что при нажатии на кнопку добавить не делает получить нажимается для неправильного DIV ...

и мой HTML является:

<form id="myForm"> 
     <h2>Education</h2> 
     <p>Please add all of your education</p> 
     <div style="margin-bottom: 4px; border: 2px solid; border-style: dashed" class="clonedInput"> 

      Level: <select> 
       <option value="secondary">Secondary</option> 
       <option value="someps">Some Post Secondary</option> 
       <option value="college">College</option> 
      </select> <br /> <br /> 
    Did you receive a degree, diploma or certificate?<br /> 
     <select> 
      <option value="certificate">Certificate</option> 
      <option>Diploma</option> 
      <option value="degree">Degree</option> 
     </select> <br /> 
     <input type="button" class="btnDel" value="Remove Education" disabled="disabled" /> 
    </div> 
    <div> 
     <input type="button" id="btnAdd2" value="add Education" /> 
    </div> 

    <h2>Experience</h2> 
    <p>Please add all of your experience</p> 
    <div style="margin-bottom: 4px; class="clonedInput"> 

     Position title: <input type="text"><br /> Years at position: 
     <input type="number"><br /> 
     Responsibilities: <input type="text"><br /> 
     <input type="text"><br /> 
     Type: <select> 
      <option>Accounting, banking and Finance</option> 
      <option>Publishing & Journalism</option> 
      <option>Social Care & guidance work</option> 
     </select> 
     <input type="button" class="btnDel2" value="Remove Experience" 
      disabled="disabled" /> 
    </div> 

    <div> 
     <input type="button" id="btnAdd2" value="add Experience" /> 
    </div> 
</form> 

Любые идеи о том, как я могу исправить мой сценарий так, что, когда я нажимаю кнопку добавления для образования, новый DIV, содержащий все поля для «образования» появляются ниже предыдущего образовательного ящика и то же самое для образования?

Любая помощь будет оценена по достоинству. Благодаря!

Answer 1

Во-первых, почему у вас есть 2x $(document).ready? Объедините свой код в один.

Причина, почему ваш дублируется ДИВ появляются в конце формы потому, что и ваше образование и опыт дивы имеют class="clonedInput", следовательно, $('.clonedInput:last').after(c) вызывает дублированный ДИВ быть размещены после по разрезу Опыт (который случается последний div, который соответствует переключателю .clonedInput).

Решение должно дать каждому из этих наборов divs свое собственное уникальное имя класса, например eduInput и expInput соответственно. Исправленный код будет, следовательно, будет:

$('#btnAdd').click(function() { 
     $('.btnDel:disabled').removeAttr('disabled'); 
     var c = $('.eduInput:first').clone(true); 
     c.children(':text').attr('name', 'input' + (++inputs)); 
     $('.eduInput:last').after(c); 
    }); 

для образования дел.

Чтобы очистить код, я предлагаю привязать обе кнопки добавления к одному и тому же обработчику, но действовать по-разному, проверяя целевой параметр и определяя, какой набор (образование или опыт) дублировать. Такие как:

// single handler and click event for both buttons 

    var clickHandler = function (e) { 
     // determine which btnAdd was clicked, such as e.getAttribute('id') 
    } 

    $('.btnAdd').click(clickHandler); 

Но серьезно, вы должны немного очистить свой код.