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();
          }
      });
  });
});  
Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Card Bootstrap4 02

Card Bootstrap4 02

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Dropdown right aligned B4

Dropdown right aligned B4

Form login et créer un compte style01

Form login et créer un compte style01

Image hover 04

Image hover 04

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Texte Block Posts Style01

Texte Block Posts Style01

bootstrap4 tabs

bootstrap4 tabs

input radio checkbox b4 style

input radio checkbox b4 style

texte animate css

texte animate css