How to add and remove rows with buttons using jquery?

How I can add rows while clicking on the + button. And delete rows while clicking on the - button
Below is the code.

please assist me with guidelines or even a piece of code in javascript that I can use to add and delete rows using the buttons.

Help would be greatly appreciated.

<body>
  <div class="container">
    <form method="POST">
       <div class="form-row">
          <div class="col">
                Dish Name<input type="text" class="form-control" id="dish_name">
          </div>
          <div class="col">
                Price<input type="text" class="form-control" id="price">
          </div>
        </div>
        <div class="form-row">
            <div class="col">
                Description<input type="text" class="form-control" id="description">
            </div>
        </div>


        <div class="form-row" id="container">
            <div class="col-md-3">
                Name<input type="text" class="form-control" id="name">
            </div>

            <div class="col-md-3">
                Unit<input type="text" class="form-control" id="description">
            </div>

            <div class="col-md-3">
                Price<input type="text" class="form-control" id="price1">
            </div>

            <div class="col-md-3">
                <button type="button" id="add-row"><span>+</span></button>
                
            </div>
        </div>  

        <div class="form-row" id="container1">
        </div>      
    </form>
</div>

<script type="text/javascript">
    
    $(document).ready(function(){
        var data = '<div class="col-md-3">'
                + 'Name<input type="text" class="form-control" id="name">'
                + '</div>'

                + '<div class="col-md-3">'
                + 'Unit<input type="text" class="form-control" id="description">'
                + '</div>'

                + '<div class="col-md-3">'
                + 'Price<input type="text" class="form-control" id="price1">'
                + '</div>'

                + '<div class="col-md-3">'
                + '<button type="button" id="delete-row"><span>-</span></button>'
                
                + '</div>'
                + '</div>'
        $('#add-row').click(function(){
            $('#container1').append(data);
        });
    });

  </script>
</body>

66 thoughts on “How to add and remove rows with buttons using jquery?”

Leave a Comment