title: Remove inactive class items
body: <p>I am trying to make a <code>pagination</code> as shown below by uploading images and adding them to a container by creating new <code>div</code> with new <code>id's</code> and giving <code>class</code> as <code>current</code> for the first page.</p>
  
  <p>If I change to the new page I remove the active class to the current page and add it to the selected page.</p>
  
  <p>I would like to know how do I remove all the <code>inactive</code> pages which do not have class "current"</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var imagesPerPage = 4, pageNumber = 1;
  
  function onAjaxSucceded(data) {
      var pagesContainer = $('#pagesContainer'),
          imagesInPage = 0,
          divPage = $("#p1");
  
      $.each(data.result, function(index, file) {
          if (imagesInPage &gt;= imagesPerPage) {
              imagesInPage = 1;
              pageNumber += 1;
              divPage = $('&lt;div/&gt;', {id : "p" + pageNumber}).addClass('pagedemo').hide().appendTo(pagesContainer);
          } else {
              imagesInPage += 1;
          }
          var src = 'Uploads/' + file.name;
          $('&lt;img&gt;', {src: src, href: src, "class": 'LoadclickImage', align: 'left'}).appendTo(divPage);
      });
  
      $("#demo5").paginate({
          count: pageNumber,
          start: 1,
          display: Math.min(7, pageNumber),
          border: true,
          border_color: '#fff',
          text_color: '#fff',
          background_color: 'black',
          border_hover_color: '#ccc',
          text_hover_color: '#000',
          background_hover_color: '#fff',
          images: false,
          mouse: 'press',
          onChange: function(page) {
              $('#paginationdemo ._current').removeClass('_current').hide();
              $('#p' + page).addClass('_current').show();
          }
      });
  }
  
  var fakeAjaxData = {
      result: [
          {name: '../../../img/keys.png'},
          {name: '../../../img/logo.png'},
          {name: '../../../img/input-button-bg.png'},
          {name: '../../../img/remove-resources.png'},
          {name: '../../../img/logo.png'},
          {name: '../../../img/input-button-bg.png'},
          {name: '../../../img/remove-resources.png'},
          {name: '../../../img/keys.png'},
          {name: '../../../img/keys.png'},
          {name: '../../../img/input-button-bg.png'},
          {name: '../../../img/logo.png'},
          {name: '../../../img/remove-resources.png'},
          {name: '../../../img/keys.png'},
          {name: '../../../img/keys.png'},
          {name: '../../../img/input-button-bg.png'},
          {name: '../../../img/logo.png'},
          {name: '../../../img/remove-resources.png'},
          {name: '../../../img/input-button-bg.png'},
          {name: '../../../img/logo.png'},
      ]
  };
  
  $(function() {
      onAjaxSucceded(fakeAjaxData);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's my <a href="http://jsfiddle.net/gbzsR/24/" rel="nofollow">demo</a></p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>Instead of <code>removing</code> <code>inactive</code> class can anyone say me how do I remove all the pages and If I add again I need to add images from the <code>1st page.</code> as of now If I remove the pages it's adding from the last page it has added.</p>
  
  <p>Excuse me if my tags are wrong.</p>