...

View Full Version : Can't remove a list item



rfresh
07-27-2011, 09:28 PM
I'm trying to delete a item in a list. I'm getting a method not allowed error in IE8.



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

Old Pedant
07-27-2011, 09:34 PM
Just set the option to null.


selectOptions.options[i] = null;

I think it even works in all browsers, but check it to be sure.

Old Pedant
07-27-2011, 09:38 PM
Oh, but if this is a <select multiple> then you should go *backwards* to be safe:


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.



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

Philip M
07-27-2011, 09:40 PM
Like this:-


<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

Kor
07-28-2011, 11:29 AM
I'm trying to delete a item in a list. I'm getting a method not allowed error in IE8.



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.



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 :


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.


function removeOptions(selectbox){
while(selectbox.hasChildNodes()){
selectbox.removeChild(selectbox.childNodes[0]);
}
}

Old Pedant
07-28-2011, 09:05 PM
It's a nice theory, Kor, but I don't think it stands up.

Look at the part of his code you were ignoring:


var selectOptions = document.getElementById('id_employees_cbo');
for (var i=0; i<selectOptions.options.length; i++)
{
if (selectOptions.options.selected == true)
{
selectOptions.options[i].remove();
[I] 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.

bullant
07-29-2011, 12:11 AM
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.



<!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>

Logic Ali
07-29-2011, 03:21 AM
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:


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;
}
}

Kor
07-29-2011, 08:45 AM
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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum