title: Add and Delete Rows Dynamically using jQuery
body: <p>I am creating add and delete rows dynamically but it seems that my code is not working properly please help me. As i'm unable to get alert as i m trying to append table rows but before that it will check wheather table exist or not than add row</p>
  
  <pre><code>$(document).ready(function()
  {
      $("#add_Row").click(function()
      {
          if($(".test").html() == null)
          {
              alert("empty");         
           $("#add_Row").click(function()
            {
                alert("I am here");
              $('.test').append(
              "&lt;tr&gt;&lt;td&gt;&lt;input type="text"     class="index_txtBox"/&gt;&lt;/td&gt;
                   &lt;td&gt;&lt;input type="checkbox" class="check_box"/&gt;&lt;/td&gt; 
                   &lt;td&gt;&lt;input type="text"     class="txt_Box"/&gt;&lt;/td&gt;
                   &lt;td&gt;&lt;select&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;
              ");             
            });   
  
            $("#delete_Row").click(function()
            {
                if($(".test tr").length != 0)
                {               
                    $(".test tr:last-child").remove();
                }
                else
                {
                    alert("Now table is empty");
                }
            }
          }
      });     
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="buttons"&gt;
  &lt;input type="button"   id="add_Row"    value="Add Row" /&gt;
  &lt;input type="button"   id="delete_Row" value="Delete Row" /&gt;
  &lt;input type="checkbox" id="select_All" value="Select All" /&gt;Select All
  
  &lt;/div&gt;
  </code></pre>