Ajouter supprimer une tr dans une table

<!DOCTYPE html>
<html>
<head>
<title>AJOUTER SUPPRIMER UNE TR DANS UNE TABLE | par NGLESSON </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="AJOUTER SUPPRIMER UNE TR DANS UNE TABLE">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
          <form class="row mt-5">
             <div class="form-group col-lg-6 col-12">
              <input type="text" id="inputname" name="inputname" placeholder="Full name" class="form-control" required>
             </div>
             <div class="form-group col-lg-6 col-12">
              <input type="email" id="inputemail" name="inputemail" placeholder="Email Address" class="form-control" email required>
             </div>
             <div class="form-group col-lg-6 col-12">
              <button type="submit" class="add-row btn btn-sm btn-info">
                <i class="fa fa-plus"></i> Add Row in table
              </button>
             </div>
          </form>
          <table class="table table-hover">
              <thead>
                  <tr class="table-primary">
                      <th></th>
                      <th>Full name</th>
                      <th>Email Address</th>
                  </tr>
              </thead>
              <tbody>
              </tbody>
          </table>
          <button type="button" class="delete-row btn btn-sm btn-danger">
            <i class="fa fa-trash"></i> Delete selection
          </button>
      </div>
    </div>
  </div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
form{
  margin: 20px 0;
}
form input, button{
  padding: 5px;
}
table{
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
table, th, td{
  border: 1px solid #cdcdcd;
}
table th, table td{
  padding: 10px;
  text-align: left;
}
$(document).ready(function(){
  $(".add-row").click(function(){
      var inputname = $("#inputname").val();
      var inputemail = $("#inputemail").val();
      if (inputname === '' || inputemail === ''){
          console.log("input is required");
      } else {
        var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + inputname + "</td><td>" + inputemail + "</td></tr>";
        $("table tbody").append(markup);
        $("#inputname").val('');
        $("#inputemail").val('');
      }

  });
  $(".delete-row").click(function(){
      $("table tbody").find('input[name="record"]').each(function(){
        if($(this).is(":checked")){
              $(this).parents("tr").remove();
          }
      });
  });
});  
up down tr in table with js

up down tr in table with js

Timeline style08

Timeline style08

Scroll to div ID

Scroll to div ID

Nav Menu style02

Nav Menu style02

Input range slider HTML style04

Input range slider HTML style04

Form Création de compte style animée

Form Création de compte style animée

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Carousel Bootstrap3

Carousel Bootstrap3

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Buttons Styles Inspirations

Buttons Styles Inspirations

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire