Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Clear all optgroups and options from a select list

Reply
Thread Tools

Clear all optgroups and options from a select list

 
 
Brian D
Guest
Posts: n/a
 
      08-04-2006
I have a multiple select list that is created dynamically based on a
previous selection on an asp page. The first thing I do is to clear
the curent option list by

document.form1.itemcross.length = 0;

The only problem is that it leaves the optgroups. How do I also get
rid of the optgroups?

Thanks
BrianD

 
Reply With Quote
 
 
 
 
darwinist
Guest
Posts: n/a
 
      08-05-2006
Brian D wrote:
> I have a multiple select list that is created dynamically based on a
> previous selection on an asp page. The first thing I do is to clear
> the curent option list by
>
> document.form1.itemcross.length = 0;
>
> The only problem is that it leaves the optgroups. How do I also get
> rid of the optgroups?
>
> Thanks
> BrianD


You need an id for the object or a reference to it:

<script>
// delete an object by reference
function del(element){element.parentNode.removeChild(elemen t);}
// Get a reference to an object by id:
function $(id){return document.getElementById(id);}
// Delete an object by id:
function $del(id){x=$(id); del(x);}
</script>

hope this helps

---
http://darwinist.googlepages.com/htmldesktop.html
(lots of working examples)

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      08-05-2006

Brian D wrote:

> I have a multiple select list that is created dynamically based on a
> previous selection on an asp page. The first thing I do is to clear
> the curent option list by
>
> document.form1.itemcross.length = 0;
>
> The only problem is that it leaves the optgroups. How do I also get
> rid of the optgroups?


The usual way:

var sel = document.form1.itemcross;
while (sel.firstChild) {
sel.removeChild(sel.firstChild);
}


--
Rob

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-05-2006

darwinist wrote:

> Brian D wrote:
> > I have a multiple select list that is created dynamically based on a
> > previous selection on an asp page. The first thing I do is to clear
> > the curent option list by
> >
> > document.form1.itemcross.length = 0;
> >
> > The only problem is that it leaves the optgroups. How do I also get
> > rid of the optgroups?
> >
> > Thanks
> > BrianD

>
> You need an id for the object or a reference to it:


The OP has already indicated how he's doing that, and may be using
either an ID or a NAME attribute.


> <script>


Please don't recommend using invalid HTML. Do it in your own library
if you wish, but don't encourage it here.


> // delete an object by reference
> function del(element){element.parentNode.removeChild(elemen t);}


The OP is attempting to remove the child nodes, not the element itself.


--
Rob

 
Reply With Quote
 
darwinist
Guest
Posts: n/a
 
      08-06-2006

RobG wrote:
> darwinist wrote:
>
> > Brian D wrote:
> > > I have a multiple select list that is created dynamically based on a
> > > previous selection on an asp page. The first thing I do is to clear
> > > the curent option list by
> > >
> > > document.form1.itemcross.length = 0;
> > >
> > > The only problem is that it leaves the optgroups. How do I also get
> > > rid of the optgroups?
> > >
> > > Thanks
> > > BrianD

> >
> > You need an id for the object or a reference to it:

>
> The OP has already indicated how he's doing that, and may be using
> either an ID or a NAME attribute.
>
>
> > <script>

>
> Please don't recommend using invalid HTML. Do it in your own library
> if you wish, but don't encourage it here.
>
>
> > // delete an object by reference
> > function del(element){element.parentNode.removeChild(elemen t);}

>
> The OP is attempting to remove the child nodes, not the element itself.


Isn't an optgroup an element that you can remove like any other?
http://www.w3schools.com/tags/tag_optgroup.asp

>
> --
> Rob


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-06-2006
darwinist wrote:
> RobG wrote:
>> darwinist wrote:
>>
>>> Brian D wrote:
>>>> I have a multiple select list that is created dynamically based on a
>>>> previous selection on an asp page. The first thing I do is to clear
>>>> the curent option list by
>>>>
>>>> document.form1.itemcross.length = 0;
>>>>
>>>> The only problem is that it leaves the optgroups. How do I also get
>>>> rid of the optgroups?


[...]

>>> You need an id for the object or a reference to it:

>> The OP has already indicated how he's doing that, and may be using
>> either an ID or a NAME attribute.


[...]

>>> // delete an object by reference
>>> function del(element){element.parentNode.removeChild(elemen t);}

>> The OP is attempting to remove the child nodes, not the element itself.

>
> Isn't an optgroup an element that you can remove like any other?


Yes. Your response was essentially to give every option an ID, then
remove them one by one using getElementById. That is not a reasonable
method given the question.


--
Rob
 
Reply With Quote
 
darwinist
Guest
Posts: n/a
 
      08-06-2006
RobG wrote:
> darwinist wrote:
> > RobG wrote:
> >> darwinist wrote:
> >>
> >>> Brian D wrote:
> >>>> I have a multiple select list that is created dynamically based on a
> >>>> previous selection on an asp page. The first thing I do is to clear
> >>>> the curent option list by
> >>>>
> >>>> document.form1.itemcross.length = 0;
> >>>>
> >>>> The only problem is that it leaves the optgroups. How do I also get
> >>>> rid of the optgroups?

>
> [...]
>
> >>> You need an id for the object or a reference to it:
> >> The OP has already indicated how he's doing that, and may be using
> >> either an ID or a NAME attribute.

>
> [...]
>
> >>> // delete an object by reference
> >>> function del(element){element.parentNode.removeChild(elemen t);}
> >> The OP is attempting to remove the child nodes, not the element itself.

> >
> > Isn't an optgroup an element that you can remove like any other?

>
> Yes. Your response was essentially to give every option an ID, then
> remove them one by one using getElementById. That is not a reasonable
> method given the question.


I said "or a reference to it", and gave commented, working examples of
how to deal with both. What's your problem?

Javascript's native methods use a lot of codespace for common things
that don't take much time. This rigid structure is important to the
integrity of the platform but when you are putting it to any actual
purpose you need short, clear, purpose-specific functions that reflect
what your application, not the language, is doing.

For example:
http://darwinist.googlepages.com/htmldesktop.html

Feel free to criticise or contribute.

>
> --
> Rob


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-07-2006
darwinist wrote:
> RobG wrote:
> > darwinist wrote:
> > > RobG wrote:
> > >> darwinist wrote:
> > >>
> > >>> Brian D wrote:
> > >>>> I have a multiple select list that is created dynamically based on a
> > >>>> previous selection on an asp page. The first thing I do is to clear
> > >>>> the curent option list by
> > >>>>
> > >>>> document.form1.itemcross.length = 0;
> > >>>>
> > >>>> The only problem is that it leaves the optgroups. How do I also get
> > >>>> rid of the optgroups?

> >
> > [...]
> >
> > >>> You need an id for the object or a reference to it:
> > >> The OP has already indicated how he's doing that, and may be using
> > >> either an ID or a NAME attribute.

> >
> > [...]
> >
> > >>> // delete an object by reference
> > >>> function del(element){element.parentNode.removeChild(elemen t);}
> > >> The OP is attempting to remove the child nodes, not the element itself.
> > >
> > > Isn't an optgroup an element that you can remove like any other?

> >
> > Yes. Your response was essentially to give every option an ID, then
> > remove them one by one using getElementById. That is not a reasonable
> > method given the question.

>
> I said "or a reference to it", and gave commented, working examples of
> how to deal with both. What's your problem?


The OP already had a reference to the select element and just wanted to
remove all the child nodes. To use your proposed solution, the OP
would have looped through all the child nodes, then called the 'del'
function which used the child node to reference back to the parent node
to delete itself.

That may have lead to a few characters less in the for loop, but also
an extra unnecessary function object plus an extra couple of loop-ups
for parent and child nodes. So appart from obfuscation, you also make
the whole process less efficient.

The function I posted was perhaps 3 lines of code and could (had the OP
wanted) be wrapped in a separate 'deleteAllChildNodes' function. I
think it actually required fewer keystrokes, not that it matters.

Incidentally, the fastest way I've seen to delete all the child nodes
of an element is to replace it with a shallow clone of itself.
Unfortunately, a few scarce browsers don't like doing that with all
elements so it's not useful on the web. But for an intranet...


> Javascript's native methods use a lot of codespace for common things
> that don't take much time. This rigid structure is important to the
> integrity of the platform but when you are putting it to any actual
> purpose you need short, clear, purpose-specific functions that reflect
> what your application, not the language, is doing.


I don't see how adding an ID to every element you want to delete makes
life easier. It also suggests managing all those IDs and some
algorithm to work out which ones are of interest.

Creating single-line functions purely for the sake of reducing the
number of keystrokes for a programmer to type a method will not lead to
any great advantage in reducing software development times (that
discussion is being hosted in another thread I think). If it did, such
widely used environments as VB wouldn't have names that approach the
length of short sentences (please don't assume I think VB is some
paragon of programming excellence - it's just an example) and brevity
would be a fundamental principle of coding standards everywhere. It
isn't - clarity is.

If you've ever tried to maintain some one else's code (say C or C++)
you'd know why.


--
Rob

 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      08-07-2006
darwinist wrote:
> RobG wrote:
>> darwinist wrote:
>>>> darwinist wrote:

<snip>
>>>>> You need an id for the object or a reference to it:

<snip>
>>> Isn't an optgroup an element that you can remove like
>>> any other?

>>
>> Yes. Your response was essentially to give every option
>> an ID, then remove them one by one using getElementById.
>> That is not a reasonable method given the question.

>
> I said "or a reference to it", and gave commented, working
> examples of how to deal with both. What's your problem?


The example you gave was an example that required each optgroup element
to have and ID, that would be the wrong thing to do.

<snip>
> For example:
> http://darwinist.googlepages.com/htmldesktop.html
>
> Feel free to criticise


You have never actually said what this thing is supposed to be for. It
looks like it is indented to be the bases for an in-browser windowing
system for web-applications. It doesn't look capable enough for any
actual example of such, but I suppose could be extended for specific
applications. However, as it is only really suited for Mozilla/Gecko
browsers as it stands I don't see it being of much practical benefit in
a world where IE support is normally expected (and sometimes
sufficient).

> or contribute.


You don't appear to be someone who takes advice, so anything approaching
collaboration is out of the question.

Richard.


 
Reply With Quote
 
darwinist
Guest
Posts: n/a
 
      08-07-2006
RobG wrote:
> darwinist wrote:
> > RobG wrote:
> > > darwinist wrote:
> > > > RobG wrote:
> > > >> darwinist wrote:
> > > >>
> > > >>> Brian D wrote:
> > > >>>> I have a multiple select list that is created dynamically based on a
> > > >>>> previous selection on an asp page. The first thing I do is to clear
> > > >>>> the curent option list by
> > > >>>>
> > > >>>> document.form1.itemcross.length = 0;
> > > >>>>
> > > >>>> The only problem is that it leaves the optgroups. How do I also get
> > > >>>> rid of the optgroups?
> > >
> > > [...]
> > >
> > > >>> You need an id for the object or a reference to it:
> > > >> The OP has already indicated how he's doing that, and may be using
> > > >> either an ID or a NAME attribute.
> > >
> > > [...]
> > >
> > > >>> // delete an object by reference
> > > >>> function del(element){element.parentNode.removeChild(elemen t);}
> > > >> The OP is attempting to remove the child nodes, not the element itself.
> > > >
> > > > Isn't an optgroup an element that you can remove like any other?
> > >
> > > Yes. Your response was essentially to give every option an ID, then
> > > remove them one by one using getElementById. That is not a reasonable
> > > method given the question.

> >
> > I said "or a reference to it", and gave commented, working examples of
> > how to deal with both. What's your problem?

>
> The OP already had a reference to the select element and just wanted to
> remove all the child nodes. To use your proposed solution, the OP
> would have looped through all the child nodes, then called the 'del'
> function which used the child node to reference back to the parent node
> to delete itself.
>
> That may have lead to a few characters less in the for loop, but also
> an extra unnecessary function object plus an extra couple of loop-ups
> for parent and child nodes. So appart from obfuscation, you also make
> the whole process less efficient.
>
> The function I posted was perhaps 3 lines of code and could (had the OP
> wanted) be wrapped in a separate 'deleteAllChildNodes' function. I
> think it actually required fewer keystrokes, not that it matters.


You're right to empty an object it's more efficient to have a function
that does just that, instead of a generic delete one and another loop
for every object you want to empty.

> Incidentally, the fastest way I've seen to delete all the child nodes
> of an element is to replace it with a shallow clone of itself.
> Unfortunately, a few scarce browsers don't like doing that with all
> elements so it's not useful on the web. But for an intranet...
>
>
> > Javascript's native methods use a lot of codespace for common things
> > that don't take much time. This rigid structure is important to the
> > integrity of the platform but when you are putting it to any actual
> > purpose you need short, clear, purpose-specific functions that reflect
> > what your application, not the language, is doing.

>
> I don't see how adding an ID to every element you want to delete makes
> life easier. It also suggests managing all those IDs and some
> algorithm to work out which ones are of interest.


That was an argument for short single-word functions that have meaning
in the contenxt of a partiuclar application. The overuse of the ID tag
is just my ignorance of javascript and not related in any way.

> Creating single-line functions purely for the sake of reducing the
> number of keystrokes for a programmer to type a method will not lead to
> any great advantage in reducing software development times (that
> discussion is being hosted in another thread I think). If it did, such
> widely used environments as VB wouldn't have names that approach the
> length of short sentences (please don't assume I think VB is some
> paragon of programming excellence - it's just an example) and brevity
> would be a fundamental principle of coding standards everywhere. It
> isn't - clarity is.


Brevity is not neutral with regards to clarity. Mashing a lot of words
together with hungarian notation isn't necessarily more clear than
single word sentences, but it is more precise for a framework or
toolkit. Using lots of convoluted code structures and peforming too
many operations in a single statement is also not clear, although it
may be brief.

Complete words, individual words, are what we read best, and how we
think.

> If you've ever tried to maintain some one else's code (say C or C++)
> you'd know why.


Funny you should mention it I've been doing precisely that for the last
few months.

>
> --
> Rob


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamic select lists using optgroups again - without frameworks Pascal Ehlert Javascript 19 01-21-2008 09:56 PM
Dynamic selects using optgroups not working in IE Pascal Ehlert Javascript 6 01-18-2008 05:27 PM
code to clear all select options jason.tadeo@gmail.com Javascript 1 10-07-2006 06:25 AM
clear an html SELECT and next insert in it all the elements of an array SAN CAZIANO Javascript 1 11-25-2004 02:40 PM
implement "select all" button to select all checkboxes Matt ASP General 2 01-11-2004 01:08 PM



Advertisments