Emptying and adding new items in the list in jquery

626
November 23, 2016, at 9:35 PM

I've an jquery mobile list with some list items. I simply want to remove old items and add new items in it dynamically. I have tried the following code but it doesn't remove the previous list items and adds new items below them.

  <div data-role="page" id="main">
  <div data-role="content">
  <ul data-role="listview" id="listing">
  </ul>
   <button onclick="loadList()">Click</button>
   </div>
    </div>
   var  c1 = 0;
   var c2 = 10;
   function loadList() {
    $('#listing').empty();
    location.reload();
   for(var i = c1; i<c2; i++) {
    $('#listing').append('<li>'+i+'</li>');
     }
    c1+=1;
    c2+=1;
   }
Answer 1

For first you must write your JavaScript code into the <script> tag.(If your write inside of script tag edit your question and add script tag).Your code works correct.But there is one issue.When your are calling location.reload() it refreshes your page,so it adds items into your ul but then after reloading it removes them again.So you don't see any changes.If you want it to work,remove location.reload()

<div data-role="page" id="main">
  <div data-role="content">
  <ul data-role="listview" id="listing">
  </ul>
   <button onclick="loadList()">Click</button>
   </div>
    </div>
<script>
   var  c1 = 0;
   var c2 = 10;
   function loadList() {
    $('#listing').empty();
    location.reload(); // <- comment this or remove
   for(var i = c1; i<c2; i++) {
    $('#listing').append('<li>'+i+'</li>');
     }
    c1+=1;
    c2+=1;
   };
</script>
Rent Charter Buses Company
READ ALSO
How to access AngularJS {{curly-brace-value}} in jQuery

How to access AngularJS {{curly-brace-value}} in jQuery

From the question itself, I am sure you understand that I am not an angular/jquery expert. .

611
jQuery add target = _blank to all links that have a specific class

jQuery add target = _blank to all links that have a specific class

I am trying to add attribute target =_blank to all links that have specific classes. Example:.

565
Closing conditionally a bootstrap modal panel if login is succesful

Closing conditionally a bootstrap modal panel if login is succesful

I'm building a SPA webapp integrating reactjs with jquery, I have a component to control the authentication. It is rendering a modal panel with username and password.

532
Disabling Sunday from Datepicker

Disabling Sunday from Datepicker

I am trying to disable "Sunday" from being selected in the "datepicker" in our online booking script. I have searched on Google with hundreds of solutions, but none seem to take effect within the script when implemented.

452