JQuery Show Скрыть div от коллекции div на кнопке

Question

Я создаю один пользовательский интерфейс, который позволяет пользователям вводить свою информацию, то есть имя, фамилию, контактный номер. В то время возможно только 5 человек. Вот предварительный набор HTML:

<div class="row rootPerson"> 
    <div class="col-md-1"> 
     <div class="form-group"> 
      <label>6</label> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="form-group"> 
      <%-- root person always stays there --%> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
</div> 
<div class="row person2" style="display: none"> 
    <div class="col-md-1"> 
     <div class="form-group"> 
      <label>6</label> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="form-group"> 
      <label class="removeperson2">Remove person</label> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
</div> 
<div class="row person3" style="display: none"> 
    <div class="col-md-1"> 
     <div class="form-group"> 
      <label>6</label> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="form-group"> 
      <label class="removeperson3">Remove person</label> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
</div> 
<div class="row person4" style="display: none"> 
    <div class="col-md-1"> 
     <div class="form-group"> 
      <label>6</label> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="form-group"> 
      <label class="removeperson4">Remove person</label> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="form-group"> 
      <%-- server control --%> 
     </div> 
    </div> 
</div> 
<div class="row btnAddMorePerson"> 
    <div class="col-md-12"> 
     <div class="form-group"> 
      <%-- button --%> 
     </div> 
    </div> 
</div> 
<div class="row btnForm"> 
    <div class="col-md-12"> 
     <div class="form-group"> 
      <%-- button --%> 
     </div> 
    </div> 
</div> 

Div с именем класса [rootPerson] всегда будет оставаться. Нажав [addMoreBtn], вы увидите следующий div с именем класса, начинающимся с [person *]. Этот div можно снова скрыть, нажав на div с именем класса, начинающимся с [removePerson *].

Я хочу показать/скрыть div, имеющий имя класса, начиная с [person *], может быть больше, чем я определил здесь.

Если человек2 виден, индивид div div3 будет отображаться на кнопке addMore. если person2 был удален, addMore будет отображаться person2.

Answer 1

Я только что работал над аналогичной функциональностью в javascript для своего собственного проекта. Вы можете добавить HTML, нажав на кнопку с помощью javascript на странице.

Я сделал вам скрипку: http://jsfiddle.net/vjGdw/

Я также добавил кнопку удаления, которая отображается на яваскрипт функции RemovePerson().

Если вас интересует, как именно я реализовал это в моем проекте, вы найдете здесь: http://carbocount.wikidot.com/project:products:visualization

Не стесняйтесь спросить, если у вас есть вопросы