JavaScript从多个选择框中删除元素

Question

I have a form where I have a select box and a drop down menu with two buttons and a text field. Enter an item into the text field and it gets added to BOTH the select box above AND the drop down menu. I can figure out how to remove the selected item from the select box but how do I ALSO remove it from the drop down menu??

Working JS FIDDLE EXAMPLE

NOTE: On the actual form these will be on different tabs so you won't be able to see them at the same time, the list just needs to populate from one area to the other.

CSS

#sbox {
overflow: hidden;
width: 200px;
}

HTML

        <select id="sbox" name="selectbox" size="5"></select>
    <BR>
    <button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete Selected Problem</button>
      </td>
  </tr>
<tr>
  <td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click &quot;Add to List&quot;. To remove a problem, click it in the list, then click, &quot;Delete Selected Problem&quot;<P>
    <strong>New Problem</strong><P>
    <input type="text" id="ProbAreaFrom">
     <P>
    <button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
    </p>

    Problem being detailed:<BR>
     <select name="select" id="dbox">
     </select>

JAVASCRIPT

function ListProbs() {
var x = document.getElementById("sbox");
    var txt1 = document.getElementById("ProbAreaFrom").value;
    var option = document.createElement("option");
    option.text = txt1
    x.add(option);
     ListProbs2();       
    } 

function ListProbs2() {
var y = document.getElementById("dbox");
    var txt1 = document.getElementById("ProbAreaFrom").value;
    var option = document.createElement("option");
    option.text = txt1
    y.add(option);
    ProbAreaFrom.value="";      
}     

function DeleteProbs() {
var x = document.getElementById("sbox");
for (var i = 0; i < x.options.length; i++) {
    if (x.options[i].selected) {
        x.options[i].remove();
    }
   }
}

Answer 1

working fiddle. Added a button to remove selected item from select element. The function's name is

DeleteProbs2

http://jsfiddle.net/4uBYf/2/

   function ListProbs() {
    var x = document.getElementById("sbox");
        var txt1 = document.getElementById("ProbAreaFrom").value;
        var option = document.createElement("option");
        option.text = txt1
        x.add(option);
         ListProbs2();       
    } 

function ListProbs2() {
    var y = document.getElementById("dbox");
        var txt1 = document.getElementById("ProbAreaFrom").value;
        var option = document.createElement("option");
        option.text = txt1
        y.add(option);
        ProbAreaFrom.value="";      
    }     

function DeleteProbs() {
    var x = document.getElementById("sbox");
    for (var i = 0; i < x.options.length; i++) {
        if (x.options[i].selected) {
            x.options[i].remove();
        }
    }
}


function DeleteProbs2() {
    var index = $('#dbox').get(0).selectedIndex;
    $('#dbox option:eq(' + index + ')').remove();

}

html

<div class="table-responsive">
    <table class="table table-bordered">
    <tbody>
    <tr>
      <td  colspan="2" valign="top">
        Problem List:<BR />

        <select id="sbox" name="selectbox" size="5"></select>
        <BR>
        <button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete Selected Problem</button>
          </td>
      </tr>
    <tr>
      <td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click &quot;Add to List&quot;. To remove a problem, click it in the list, then click, &quot;Delete Selected Problem&quot;<P>
        <strong>New Problem</strong><P>
        <input type="text" id="ProbAreaFrom">
         <P>
        <button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
        </p>

        Problem being detailed:<BR>
         <select name="select" id="dbox">
         </select>
           <button type="button" class="btn btn-default" id="test" onclick="DeleteProbs2();">remove from select</button>

    </td>
      </tr>
 </tbody>
</table>
</div>

update for your request (first button removes from both elements)

http://jsfiddle.net/4uBYf/5/

function DeleteProbs() {
    var x = document.getElementById("sbox");
    for (var i = 0; i < x.options.length; i++) {
        if (x.options[i].selected) {
            var text=$( "#dbox option:selected" ).text();

             $('#dbox option').filter(function () { return $(this).html() == text; }).remove();            
            x.options[i].remove();
        }
    }
}

Answer 2

function DeleteProbs() {
    var x = document.getElementById("sbox");
    var y = document.getElementById("dbox");
    var val;
    for (var i = 0; i < x.options.length; i++) {
        if (x.options[i].selected) {
            val = x.options[i].value;
            x.options[i].remove();
        }
    }
    for (var i = 0; i < y.options.length; i++) {
        if (y.options[i].value == val) {
            y.options[i].remove();
        }
    }
}