title: How to delete and add an li element inside a ul tag with jquery
body: <p>I had the below html code</p>
  
  <pre><code>&lt;ul class="sales_details clearfix"&gt;
      &lt;li class="blue_disc"&gt;
          &lt;a id="product_detail" href=""&gt;Som stuff&lt;/a&gt; 
          &lt;span id="product_revenue"&gt;$45&lt;/span&gt; 
     &lt;/li&gt;
  &lt;/ul&gt;
  &lt;input  class="update" type="button"&gt;
  </code></pre>
  
  <p>And  my <code>jquery</code> code is</p>
  
  <pre><code>$(document).ready(function () {
      $('.update').click(function() {
          var array_list = response_list; // I will get response_list from somewhere as list of dictionaries
          $.each(array_list, function (i, item) {
              href = "/products/" + item.products__id + "/"
              $('#product_detail').attr('href', href).html(item.products__name);
              $('#product_revenue').html(item.revenue);
          });
      });
  });
  </code></pre>
  
  <p>So when from my above html and jquery code, the <code>li element</code> with class <code>blue_disc</code> is updating, but the values are overriding and as a result I can able to see only one record as <code>li</code></p>
  
  <p>For example I have the <code>array_list</code> as below:</p>
  
  <pre><code>[{'products__name':'One', 'revenue':'45'},
  {'products__name':'two', 'revenue':'32'},
  {'products__name':'three', 'revenue':'35'}]
  </code></pre>
  
  <p>I can able to see only one <code>li</code> element with <code>product__name : three</code> data,</p>
  
  <p>so what I want to do is</p>
  
  <ol>
  <li>First delete the <code>li element</code> with class <code>blue_disc</code>(Because by default i am displaying some data)</li>
  <li>The create an li element like with the details above,</li>
  </ol>
  
  <p>So how to </p>
  
  <ol>
  <li>Delete an <code>li element</code> with a class </li>
  <li>How to update an element exact after the <code>ul</code> with class <code>sales_details</code> as above ?</li>
  </ol>