追加（）和刪除（）文本框，創建不需要的空白空間

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樣式而不是

---