How To Add/Remove Table Row Dynamically Using Jquery.

In this post , We will learn how we can add and remove table row dynamically using jquery. If you are begginner and want to add and remove table row dynamically at run time then this post really help you.

<html>
<head>
  <title>How to add and remove table row dynamically uisng jquery - Phpforever.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
  <h4>How to add and remove table row dynamically uisng jquery - Phpforever.com</h4>
    <div class="form-group">
      <label>Name:</label>
      <input type="text" id="name" class="form-control">
    </div>    
    <div class="form-group">
      <label>Email:</label>
      <input type="text" id="email" class="form-control">
    </div>   
    <button type="button" id="btn" class="btn btn-primary">Add To List</button>   
  <br/><br>
  <table class="table table-bordered" id = "table" style='display:none'>
    <thead style='background-color:#abc'>
      <th>Name</th>
      <th>Email</th>
      <th width="200px">Action</th>
    </thead>
    <tbody>
    
    </tbody>
  </table>   
</div>
</body>
<script type="text/javascript">
    $(document).ready(function(){		
	$('#btn').click(function(){	  
	  let name = $('#name').val();
	  let email = $('#email').val();
		  if(name==''||name==null||name==undefined){
		     alert('Please enter name');
		     return false;
	          }
		  if(email==''||email==null||email==undefined){
		       alert('Please enter email');
			return false;
	          }
$('#table').show();
var tabledata = "<tr><td>" + name + "</td><td>" + email + "</td>"+"<td><button class='btn btn-danger remove'  >Remove</button></td></tr>";
 $("#table").append(tabledata);
 $('#name,#email').val('');
});
		
$("body").on("click", ".remove", function(){
	$(this).parents("tr").remove();
});
	
});
</script>