removing appended items
<p>I have in my form a listbox.</p>

<pre><code>&lt;span&gt;
    &lt;select size=5 id="submission_author_ids" name="submission[author_ids][]"  multiple onfocus="displayOptions();"&gt; &lt;/select&gt;
  &lt;/span&gt;
</code></pre>

<p>I have a function which reads all options in the listbox and then appends it in a div.</p>

<pre><code>function displayOptions(){

var list = document.getElementById('submission_author_ids');
//$j('#spanSubmitters').remove();
for(var i = 0; i &lt; list.options.length; ++i)
$j('#spanSubmitters').append(list.options[i].text);

 }
</code></pre>

<p>The problem is that each time focus is brought on the listbox, the options are appended to the div. This can results in duplication.
I would like to remove all appended options in the div first and append the options afresh each time the listbox receives focus.</p>

<p>I tried the code below but it's doesn't seem to be working --- options are no longer displayed</p>

<pre><code>$j('#spanSubmitters').remove();
</code></pre>

<p>I would be grateful if someone could help me out with this.</p>

<p>Cheers</p>
