Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <ul class="main" style="list-style-type:none;">
    <li class="append_list">
      <label>Product 1</label> <input type="text"  value="1" >
      <br>
       <label>Product 2</label> <input type="text" value="2">
      <br>
       <label>Product 3</label> <input type="text">
      <br>
       <label>Product 4</label> <input type="text">
      <br>
    
    </li>
  </ul>
    <button id="add" style="clear:both">ADD NEW PRODUCTS</button>
  
</body>
</html>
 
$(document).ready(function(){
$("#add").click(function () 
                {                                           $('.main').append('<br>');  $('.main').append($('.append_list :first').clone());
 $('.main li:last').append(
 "<button class='rmv_btn' style='clear:both'> Remove </button>")
   
   $('.main li:last :input').val('');
});                 
  
  
  $(document).on("click", ".rmv_btn", function () 
{
   $(this).closest('li').remove();
 
});
  
  
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers