title: Move elements from a listbox to another
body: <p>I have 2 listboxes and when a button is pressed I need to move an option from one to another.</p>
  <p>I did this:</p>
  <p>HTML</p>
  <pre class="lang-html prettyprint-override"><code>&lt;table border=&quot;1&quot; cellpadding=&quot;5&quot;&gt;
      &lt;tr&gt;
          &lt;td&gt; Un-Selected &lt;br /&gt;
              &lt;select multiple=&quot;multiple&quot; id=&quot;selectBoxOne&quot; size=&quot;5&quot; class=&quot;selectListBox&quot;&gt;
                  &lt;option value=&quot;0&quot; id=&quot;multiple0&quot;&gt;Option 0&lt;/option&gt;
                  &lt;option value=&quot;1&quot; id=&quot;multiple1&quot;&gt;Option 1&lt;/option&gt;
                  &lt;option value=&quot;2&quot; id=&quot;multiple2&quot;&gt;Option 2&lt;/option&gt;
                  &lt;option value=&quot;3&quot; id=&quot;multiple3&quot;&gt;Option 3&lt;/option&gt;
                  &lt;option value=&quot;4&quot; id=&quot;multiple4&quot;&gt;Option 4&lt;/option&gt;
                  &lt;option value=&quot;5&quot; id=&quot;multiple5&quot;&gt;Option 5&lt;/option&gt;
              &lt;/select&gt;
              &lt;br /&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;selectAllFirst&quot; /&gt;Select All or Ctrl+Click
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div onclick=&quot;move('left');&quot;&gt;
                  &lt;&lt; &lt;/div&gt;
                      &lt;div onclick=&quot;move('right');&quot;&gt; &gt;&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt; Selected &lt;br /&gt;
              &lt;select name=&quot;policyCode&quot; multiple=&quot;multiple&quot; id=&quot;selectBoxSecond&quot; size=&quot;5&quot; class=&quot;selectListBox&quot;&gt;&lt;/select&gt;
              &lt;br /&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;selectAllSecond&quot; /&gt;Select All or Ctrl+Click
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>javascript:</p>
  <pre class="lang-js prettyprint-override"><code>// Declare elements
  
  var selectOptions = Array();
  selectOptions[0] = &quot;Option 0&quot;;
  selectOptions[1] = &quot;Option 1&quot;;
  selectOptions[2] = &quot;Option 2&quot;;
  selectOptions[3] = &quot;Option 3&quot;;
  selectOptions[4] = &quot;Option 4&quot;;
  selectOptions[5] = &quot;Option 5&quot;;
  
  // function to move an element from a box to the other
  function move(sens)
  {               
      if (sens == &quot;right&quot;)
      {
          var selObj = document.getElementById('selectBoxOne');    
          var chkAll = document.getElementById(&quot;selectAllFirst&quot;)
          var destination = document.getElementById(&quot;selectBoxSecond&quot;);
      }
      else
      {
          var selObj = document.getElementById('selectBoxSecond');    
          var chkAll = document.getElementById(&quot;selectAllSecond&quot;)
          var destination = document.getElementById(&quot;selectBoxOne&quot;);
      }
      var selectedArray = new Array();        
      var i;
      var count = 0;
      if (chkAll.checked == 1)
      {
          for (i = 0; i&lt;selectOptions.length; i++)
          {
              selectedArray[i] = i;
          }
      }
      else
      {            
          for (i=0; i&lt;selObj.options.length; i++) {
              if (selObj.options[i].selected) {
                  selectedArray[count] = selObj.options[i].value;
              count++;
              }
          }            
      }
      
      for (i = 0; i &lt; selectedArray.length; i++)
      {
          var optionTag = document.createElement(&quot;option&quot;);
          id = selectedArray[i];
          optionTag.innerHTML = selectOptions[id];
          optionTag.value = id;
          optionTag.id = &quot;multiple&quot;+id;
          destination.appendChild(optionTag);
          var rmv = document.getElementById(&quot;multiple&quot;+id);
          rmv.parentNode.removeChild(rmv);
      }
  }
  </code></pre>
  <p>Now: The script works great from moving from left box to the right box. But when I try the other way around it kind of crashes. No error returned but I know for sure is the removal part (if I comment it it works fine... except that it generates duplicates since there is no removal of the moved option).</p>
  <p>To be more specific, this 2 lines:
  var rmv = document.getElementById(&quot;multiple&quot;+id);
  rmv.parentNode.removeChild(rmv);</p>
  <p>Since there is no error returned, I don't know how to fix this.</p>