title: remove a textbox dynamically in jquery without using any javascript
body: <p>Here is my code, i tried to create dynamically add/remove textbox. when i click the delete button everything is deleted, what should i do (or pls specify my error in this code.) i want to remove one by one.. can anyone tell this to me? Thanks in advance..</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;dynamic add button&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt; &lt;/script&gt;              
  &lt;script&gt;
      $(document).ready(function () {
          $('&lt;button/&gt;').attr({ 'id': 'add' }).appendTo("body");
          $("#add").text("Add Field");
          $('&lt;div/&gt;').attr({ 'id': 'items' }).appendTo("body");
          $('&lt;div/&gt;').attr({ 'type': 'text', 'name': 'input[]' }).appendTo("#items");
  
          $("#add").click(function (e) {
              //Append a new row of code to the "#items" div
              var text1 = $('&lt;div/&gt;').attr({ 'id':'div2','type': 'text', 'name': 'input[]' });
             var text2 = $('&lt;input/&gt;').attr({ 'id': 'i1', 'type': 'text', 'name': 'username', 'size': '25' });
             var text3 = $('&lt;button/&gt;').attr({ 'id': 'del' }).text("Delete");
              $("#div2").append(text2, text3);
              $("#items").append(text1);
              $('&lt;br/&gt;').insertAfter(text3);
          });
  
          //delete function
          $("body").on("click","#del",function (e) {
              $(this).parent("div").remove();
          });       
      });      
     &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>