title: How To Remove Textbox Using Jquery On Button Click
body: <p>Here i want to add new textbox on click of button i.e btnAdd and and also want to remove those newly added textbox by clicking the button i.e btnRemove which is also added along with the new added textbox on a click of btnAdd .<br>Now the problem is that as i click the add button i.e btnAdd new textbox along with remove button i.e btnRemove is also added as required but as i click on remove button i.e btnRemove the respective textbox and that respective remove button is not removed.<br><br>Below is what i have done<br><br></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="a"&gt;
      &lt;input id="Text1" type="text" /&gt;
  &lt;/div&gt;
  &lt;input id="btnAdd" type="button" value="Add" /&gt;
  &lt;script&gt;
      $(document).ready(function () {
          $("#btnAdd").click(function () {
              $("#a").append('&lt;input type="text" id="Text1" value="" /&gt;'+'&lt;input type="button" id="btnRemove" value="Remove"/&gt;');
          });
          $('#btnRemove').click(function () {
              $('#Text1').remove();
              $(this).remove();
          });
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>