title: removing the existing products content on ajax call
body: <p>In this code i have $product_list which is obtained by executing the query given below, but using ajax when i click on the button link1 it must empty the $product_list.</p>
  
  <p>So, how do i empty the content on <code>products_list</code> using ajax call when i click on <code>Link1</code> button?</p>
  
  <p>In some of the questions I have seen using div id removing the content. bUT HERE I m not quite sure about it as i have a class and that to be removed.</p>
  
  <p>Please help..</p>
  
  <pre><code>&lt;?php
  session_start(); //start session
  include("config.inc.php"); //include config file
  ?&gt;
  &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Stores&lt;/title&gt;
  &lt;link href="style/style1.css" rel="stylesheet" type="text/css"&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="w3-bar w3-black"&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 1&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div align="center"&gt;
  &lt;h3&gt;Products&lt;/h3&gt;
  &lt;/div&gt;
  &lt;?php
  //List products from database
  $results = $mysqli_conn-&gt;query("SELECT product_name, product_desc, product_code, product_image, product_price FROM products_list");
  //Display fetched records as you please
  
  $products_list =  '&lt;ul class="products-wrp"&gt;';
  
  while($row = $results-&gt;fetch_assoc()) {
  $products_list .= &lt;&lt;&lt;EOT
  &lt;li&gt;
  &lt;form class="form-item"&gt;
  &lt;h4&gt;{$row["product_name"]}&lt;/h4&gt;
  &lt;div&gt;
  &lt;img src="images/{$row["product_image"]}" height="62" width="62"&gt;
  &lt;/div&gt;
  &lt;div&gt;Price : {$currency} {$row["product_price"]}&lt;div&gt;
  
  &lt;div class="item-box"&gt;
      &lt;input name="product_code" type="hidden" value="{$row["product_code"]}"&gt;
      &lt;button type="submit"&gt;open&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/li&gt;
  EOT;
  
  }
  $products_list .= '&lt;/ul&gt;&lt;/div&gt;';
  echo $products_list;
  ?&gt;
  &lt;script&gt;
  $(document).on("click", ".w3-button", function() {
    $("#products_list").empty()
  });&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>