Append() & Remove() Текстовое поле создает нежелательное пустое пространство

Question

Я создаю форму с динамическим добавлением и удалением текстовых полей.

Я использую jQuery 1.9.1. Я новичок в jQuery, поэтому я просмотрел несколько примеров и нашел тот, который использовал jQuery 1.4.
Я внес некоторые изменения и получил его для работы с jQuery 1.9.1, но у меня есть проблема.

Когда пользователь добавляет несколько полей, а затем удаляет их только один, а затем добавляет один раз, он действует так, как будто пустое пространство занято и добавляет новый путь вниз, а не сразу после последний.

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

Вот полный код, вы можете скопировать и вставить его, чтобы увидеть, что я имею в виду:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     var counter = 2; 
     $("#addButton").click(function() { 
      $("#textboxes").append('<input type="text" name="text' + counter + '" id="text' + counter + '"><br/>'); 
      counter++; 
     }) 

     $("#removeButton").click(function() { 
      if (counter == 1) { 
       alert("No more textbox to remove"); 
       return false; 
      } 
      counter--; 
      $("#text" + counter).remove(); 
     }); 

     $("#submitButton").click(function() { 
      var msg = ''; 
      for (i = 1; i < counter; i++) { 
       msg += "\n Textbox #" + i + " : " + $('#text' + i).val(); 
      } 
      alert(msg); 
     }); 
    }); 
</script> 
<div style="width: 800px; margin: auto; padding-top: 100px;"> 
    <form id="form" name="form"> 
     <div id="textboxes"> 
      <input type="text" name="text1" id="text1"> 
      <br/> 
     </div> 
     <input type="button" value="Add a field" class="add" id="addButton" /> 
     <input type="button" value="Remove a field" class="add" id="removeButton" /> 
     <input type="button" value="Submit" class="add" id="submitButton" /> 
    </form> 

Answer 1

Ваш <br/> является вопрос здесь. Вы продолжаете добавлять их, но не удаляете их.

Рассматривая исходный код HTML, вы видите левые <br/> элементы, которые являются причиной того, что вы видите постоянно увеличивающийся интервал между линиями.

Вместо того, чтобы иметь дело с оставленными <br/> элементами, которые могут быть весьма болезненными, не используют их вообще.

Удалить все <br/> элементов и использовать CSS для обеспечения входов обертки, похожее на это:

Измененный HTML со снятой начальной <br/>:

<div id="textboxes"> 
    <input type="text" name="text1" id="text1"> 
</div> 

CSS-:

#textboxes > input{ 
    display: block; 
} 

Сменить код, удалять дополнительные <br/>:

$("#addButton").click(function() { 
    $("#textboxes").append('<input type="text" name="text' + counter + '" id="text' + counter + '">'); 
    counter++; 
}) 

---

DEMO - Не добавляйте <br/> элементы и использовать CSS для укладки вместо

---