title: jQuery - Keeping a js array and list of DOM objects in sync?
body: <p>Let's say I have an array of objects</p>
  
  <p><code>[{href: 'some_uri', 'class': 'this-css-class'}, {href: 'another_uri', 'class': 'that-css-class'}]</code></p>
  
  <p>I now want to map that to a html list:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="this-css-class"&gt;&lt;a href="some_uri"&gt;some_uri&lt;/a&gt;&lt;/li&gt;
    &lt;li class="that-css-class"&gt;&lt;a href="another_uri"&gt;another_uri&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Assume I add another object to my array, I want to have a new <code>&lt;li&gt;</code> added to the list as well. Conversely, when I <code>$('.that-css-class').remove()</code> one of the list items, I want it to be gone in the array as well.</p>
  
  <p>I would like to keep it in jQuery, as I don't want to introduce another framework to the project.</p>
  
  <p>Help greatly appreciated, this has been doing my head in.
  Thanks.</p>