Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    Los Angeles
    Posts
    545
    Thanks
    81
    Thanked 5 Times in 5 Posts

    Can't remove a list item

    I'm trying to delete a item in a list. I'm getting a method not allowed error in IE8.

    Code:
    var selectOptions = document.getElementById('id_employees_cbo');
    for (var i=0; i<selectOptions.options.length; i++)
        {
           if (selectOptions.options[i].selected == true)
             {
                selectOptions.options[i].remove();
                break;
             }
         }
    Is there another way to do this?

    Thanks
    RalphF
    Business Text Messaging Services
    https://www.MobileTextingService.com

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Just set the option to null.
    Code:
         selectOptions.options[i] = null;
    I think it even works in all browsers, but check it to be sure.

  • Users who have thanked Old Pedant for this post:

    rfresh (07-27-2011)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh, but if this is a <select multiple> then you should go *backwards* to be safe:
    Code:
    var selectOptions = document.getElementById('id_employees_cbo');
    for (var i=selectOptions.options.length-1; i >= 0; --i)
    {
           if (selectOptions.options[i].selected ) selectOptions.options[i] = null;
    }
    But I just noticed that you break out of the loop as soon as you remove the one option, so I don't see why you need/want the loop, at all.

    Code:
    var select = document.getElementById('id_employees_cbo');
    if ( select.selectedIndex >= 0 ) select[select.selectedIndex].options = null;

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Like this:-

    Code:
    <form name='myform'>
    <select name = 'list1' id = 'list1' onchange = "removeOptions(this)">
    <option selected value=""> Choose A Fruit</option>
    <option value='Mango'> Mango </option>
    <option value='Apple'> Apple </option>
    <option value='Orange'> Orange </option>
    <option value='Watermelon'> Watermelon </option>
    <option value='Plum'> Plum </option>
    </select>
    </form>
    
    <script type = "text/javascript">
    function removeOptions(selectbox) {
    for (var i = selectbox.options.length-1; i>=1; i--) {
    if (selectbox.options[i].selected) {
    selectbox.remove(i);
    }
    }
    }
    </script>

    I heard him then, for I had just
    Completed my design
    To keep the Menai Bridge from rust
    By boiling it in wine.
    - Lewis Carroll
    Last edited by Philip M; 07-27-2011 at 09:43 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by rfresh View Post
    I'm trying to delete a item in a list. I'm getting a method not allowed error in IE8.

    Code:
    var selectOptions = document.getElementById('id_employees_cbo');
    for (var i=0; i<selectOptions.options.length; i++)
        {
           if (selectOptions.options[i].selected == true)
             {
                selectOptions.options[i].remove();
                break;
             }
         }
    Is there another way to do this?

    Thanks
    Your initial error was that you have used a direct loop without adjusting the increment.

    Code:
    for (var i=0; i<selectOptions.options.length; i++)
    When you remove the elements from a collection, the collection's length is changing, thus the key changes as well. It decrements with each element removed, so that, without an adjustment of the increment, there will be removed only half of the elements (the even ones: [0],[2],[4]...). But, to get rid of this preoccupation you may use, as Philip M suggested, a reversed (a backward) loop :
    Code:
    for (var i = selectbox.options.length-1; i>=0; i--)
    If so, the length is important only when starting the loop, as the limit is now steady, it is 0.

    There is also a generic, simpler, way, to remove all the elements from a collection - which represents all the direct child nodes of a parent - using DOM 1+ methods. Your case, the OPTION elements belonging to a SELECT element.
    Code:
    function removeOptions(selectbox){
    while(selectbox.hasChildNodes()){
    selectbox.removeChild(selectbox.childNodes[0]);
    }
    }
    Last edited by Kor; 07-28-2011 at 11:33 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    It's a nice theory, Kor, but I don't think it stands up.

    Look at the part of his code you were ignoring:
    Code:
    var selectOptions = document.getElementById('id_employees_cbo');
    for (var i=0; i<selectOptions.options.length; i++)
        {
           if (selectOptions.options[i].selected == true)
             {
                selectOptions.options[i].remove();
                break;
             }
         }
    So as soon as he finds the selected <option> and removes it, he breaks out of the loop.

    So the problem you suggest would never happen.

    Indeed, without the break what you say is correct. Which is why in my post #3 I suggested doing the loop in reverse. But then, also in my post #3, I noted that there is no reason to use a loop if you are only going to remove one <option>. (You only need the loop--and a backwards loop--if you are working with <select multiple>.)

    No?

    Not to say that using removeChild isn't the better way to go; just that your analysis of the original problem was incorrect, or so I believe.

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by rfresh View Post
    I'm trying to delete a item in a list.
    It looks like you want to delete just the selected item from the <select>. In that case you don't need a loop at all.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                function removeOption(selO){
                    if(selO.selectedIndex != 0){
                        selO.options[selO.selectedIndex] = null;
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <select name="sel1" onchange="removeOption(this)">
                    <option> Choose an option</option>
                    <option value='1'>Option 1</option>
                    <option value='2'>Option 2</option>
                    <option value='3'>Option 3</option>
                    <option value='4'>Option 4</option>
                    <option value='5'>Option 5</option>
                </select>
            </div>
        </body>
    </html>

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    The actual reason for the failure of this code, is that remove is a property of options, so whilst not the best way to do it:
    Code:
    var selectOptions = document.getElementById('id_employees_cbo');
    for (var i=0; i<selectOptions.options.length; i++)
        {
           if (selectOptions.options[i].selected == true)
             {
                selectOptions.options.remove( i );
                break;
             }
         }

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Old Pedant View Post
    It's a nice theory, Kor, but I don't think it stands up.
    It stands Except that I was not quite attentive. I thought the OP wants to remove all the options of a select element
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •