Updating listview in jqmobile

by javajosh

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.css">
  <div data-role="page" id="select_tag">
    <div data-role="content">
      <ul data-role="listview" data-divider-theme="a" data-inset="true">
        <li data-role="list-divider" role="heading">Select a tag</li>
        <li><a class="tag_button" href="#configure_tag" data-transition="fade"> Tag_Title </a></li>
                  <li><a class="tag_button" href="#configure_tag" data-transition="fade"> Tag_Title </a></li>
                  <li><a class="tag_button" href="#configure_tag" data-transition="fade"> Tag_Title </a></li>
                  <li><a class="tag_button" href="#configure_tag" data-transition="fade"> Tag_Title </a></li>
      </ul>
        <button>Add elt</button>
    </div>
  </div>
  <div data-role="page" id="configure_tag"></div>

JavaScript

//programmatically change the value of the input; the slider should change
$('button').click(function(){
    $('ul li').remove();
    $('ul').append('<li><a class="tag_button" href="#configure_tag" data-transition="fade"> Tag_Title </a></li>');
    $('ul').listview('refresh');
});