title: JavaScript Remove <tr> Table Row Dynamically
body: <p>I'm trying to remove row from my dynamic table. I've success to .append new row from JavaScript.</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function() {
      // table #pos add-row
      $(".add-row").keypress(function(e) {
          if (e.which == 13) {
  
              var barcode = $("#barcode").val();
              $.ajax({
                  type: "post",
                  url: "production/ajax/load.php",
                  dataType: "json",
                  data: {
                      barcode: $("#barcode").val()
                  },
                  success: function(data) {
                      $("#pos tbody").append(data['content']);
                  }
              });
          }
      });
  
      // Find and remove selected table rows
      $(".delete-row").click(function(){
          alert('Success');
          $("#pos tbody tr").remove();
      });
  })
  </code></pre>
  
  <p><strong>load.php</strong></p>
  
  <pre><code>    &lt;?php
  if (isset($_POST['barcode'])) {
      require '../controller/connection/connection-management.php';
  
      $barcode = $_POST['barcode'];
      $status = false;
  
      $sql = "SELECT code, title, wri_name, pub_name, year, main_category.main_category, category.category, call_number, pusat_penerbit, mrican, paingan, selling_price, discount FROM product, writer, publisher, main_category, category WHERE product.writer = writer.writer AND product.publisher = publisher.publisher AND product.main_category = main_category.main_category AND product.category = category.category AND code = '{$barcode}' ORDER BY title";
      $result = mysqli_query($conn, $sql);
  
      if (mysqli_num_rows($result) == 1) {
          while($row = mysqli_fetch_assoc($result)) {
              $barcode = $row['code'];
              $title = $row['title'];
              $sellingPrice = number_format($row['selling_price'], 0, ',', '.');
              $quantity = 1;
              $discount = $row['discount'];
              $total =  number_format((($row['selling_price'] - ($row['selling_price'] * ($discount / 100))) * $quantity), 0, ',', '.');
  
              $append = "&lt;tr class='pointer'&gt;
                  &lt;td align='right'&gt;&lt;a href='javascript:;' class='delete-row'&gt;&lt;i class='fa fa-trash'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;small&gt;{$barcode}&lt;/small&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;div style='text-align: justify'&gt;&lt;strong&gt;{$title}&lt;/strong&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;td align='right'&gt;{$sellingPrice}&lt;/td&gt;
                  &lt;td align='center'&gt;&lt;input id='quantity' type='text' class='form-control' style='text-align:center' value='1'&gt;&lt;/td&gt;
                  &lt;td align='center'&gt;&lt;input type='text' class='form-control' style='text-align:center' value='{$discount}'&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;td align='right'&gt;{$total}&lt;/td&gt;&lt;/td&gt;
              &lt;/tr&gt;";
          }
          $status = true;
      }
  
      $data = array(
          "status" =&gt; $status,
          "content" =&gt; $append
      );
  
      echo json_encode($data);
  }
  ?&gt;
  </code></pre>
  
  <p><strong>pos.php</strong> it's html table</p>
  
  <pre><code>&lt;div class="x_title"&gt;
      &lt;div class="input-group"&gt;
          &lt;span class="input-group-btn"&gt;
          &lt;button type="button" class="delete-row btn btn-primary"&gt;&lt;i class="fa fa-pencil-square-o"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/span&gt;
          &lt;input name="barcode" id="barcode" type="text" class="add-row form-control" placeholder="Enter item name or scan barcode"&gt;
          &lt;div class="input-group-btn"&gt;
              &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;Receive&lt;/button&gt;
              &lt;ul class="dropdown-menu dropdown-menu-right" role="menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Receive&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Return&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Purchase Order&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Transfer&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Store Account Payment&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="x_content"&gt;
      &lt;div class="table-responsive"&gt;
          &lt;table name="pos" id="pos" class="table table-striped jambo_table bulk_action"&gt;
              &lt;thead&gt;
                  &lt;tr class="headings"&gt;
                      &lt;th style="text-align:center" class="column-title col-sm-7" colspan="3"&gt;Item Name &lt;/th&gt;
                      &lt;th style="text-align:right" class="column-title col-sm-1"&gt;Cost &lt;/th&gt;
                      &lt;th style="text-align:center" class="column-title col-sm-2"&gt;Qty. &lt;/th&gt;
                      &lt;th style="text-align:center" class="column-title col-sm-1"&gt;Disc % &lt;/th&gt;
                      &lt;th class="column-title col-sm-1" style="text-align:right"&gt;Total &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So when I add new row in the table, everything works fine like this picture:</p>
  
  <p><img src="https://i.stack.imgur.com/fwrPr.png" alt="#pos tbody append"></p>
  
  <p>But when I click trash icon with class='delete-row', that's is not working. So I think, when I append data to table tbody it's not read class or id from the new row.</p>
  
  <p>Please someone help. I can't find any similar questions like mine. I just want to know, how to remove table row when I click trash icon from JavaScript.</p>