Compatibility

[Ken]

Over the various browsers, is it better to use:
document.getEle mentById('num1' ).removeChild(i mage_display);
or
image_display.p arentNode.remov eChild(image_di splay);

to remove an image.

Ken

[Randy Webb]

Re: Compatibility

Ken wrote:
[color=blue]
> Over the various browsers, is it better to use:
> document.getEle mentById('num1' ).removeChild(i mage_display);
> or
> image_display.p arentNode.remov eChild(image_di splay);
>[/color]

The second one uses an IE-only syntax since it assumes that
image_display is a global variable, so that alone makes the first the
best method to use.

But this is probably best:

document.getEle mentById('image _display').pare ntNode.removeCh ild('image_disp lay');

The problem with the first one is that if there is any white space or
anything else in the parent element, then the image won't be the first
child.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[RobG]

Re: Compatibility

Ken wrote:[color=blue]
> Over the various browsers, is it better to use:
> document.getEle mentById('num1' ).removeChild(i mage_display);
> or
> image_display.p arentNode.remov eChild(image_di splay);
>
> to remove an image.
>
> Ken[/color]

Don't use round brackets to address array elements (it is an IE-ism):

document.getEle mentById['num1'].removeChild(im age_display);

Regarding how to reference the thing you want to delete, it depends on
what you are doing. If the thing you want to delete can be found using
a widely supported and simple DOM method (maybe it's a named node in a
form), then pass a direct reference to it:

<form...>
....
<input type="button" value="Delete something"
onclick="delete It(this.form.aN ode);">
</form>.

and the function can be really simple:

function deleteIt(x) {
x.parentNode.re mvoeChild.x;
}

However, sometimes the document tree will not provide a simple solution
or there is no reliable relationship between the element being clicked
and the one that is to be deleted. In this case, you can pass a string
id and use getElementById( ). If the image does not have an id, then
you can trawl through the collection given by
getElementsByTa gName('img'), but it is somewhat more long winded.

If using either of the getElement(s) methods, you need to do feature
testing to ensure the users' browser supports it. Rather than put the
feature test code into the thing that is running the function (say a
link or button), you need to include it in the delete function -
otherwise you will be replicating feature test code on every element
that has an action.

Having passed the id of some element that you know you can use to
establish a relationship with the element to be deleted, use
getElementById( ), then parentNode :

function deleteIt(theThi ng) {
if (document.getEl ementById) {
var a = document.getEle mentById(theThi ng);
a.parentNode.re mvoeChild(a);
} else {
// some alternative if getElementById not supported
}
}

The parentNode is good because it guarantees the relationship. Also,
by removing any hard coded references from the function, you can use it
to delete lots of things, not just images. Note that you could replace
"a" above with document.getEle ment....theThin g); in each instance, but
it seems neater to use a variable.

Hope that helps! Rob

[RobG]

Re: Compatibility

RobG wrote:
[snip][color=blue]
> function deleteIt(x) {
> x.parentNode.re mvoeChild.x;[/color]

Oooops, that should be:

x.parentNode.re moveChild(x);

Dang rented fingers...

Rob.

[Randy Webb]

Re: Compatibility

RobG wrote:[color=blue]
> Ken wrote:
>[color=green]
>> Over the various browsers, is it better to use:
>> document.getEle mentById('num1' ).removeChild(i mage_display);
>> or
>> image_display.p arentNode.remov eChild(image_di splay);
>>
>> to remove an image.
>>
>> Ken[/color]
>
>
> Don't use round brackets to address array elements (it is an IE-ism):
>
> document.getEle mentById['num1'].removeChild(im age_display);[/color]

Did you test that?

document.getEle mentById('whate ver') is not an IE-ism. It's the way it is
to be written.

In fact, document.getEle mentById['myDiv'] does not even work in IE nor
any other browser.


--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[RobG]

Re: Compatibility

Randy Webb wrote:
[snip][color=blue]
> Did you test that?[/color]

Obviously not, or I'd not have been so wrong. My bad, and apologies.

:-( Rob.

[Ken]

Re: Compatibility

"Randy Webb" <HikksNotAtHome @aol.com> wrote in message
news:Nv6dnf7uQ6 j_ROPcRVn-uQ@comcast.com. ..[color=blue]
> Ken wrote:
>[color=green]
> > Over the various browsers, is it better to use:
> > document.getEle mentById('num1' ).removeChild(i mage_display);
> > or
> > image_display.p arentNode.remov eChild(image_di splay);
> >[/color]
>
> The second one uses an IE-only syntax since it assumes that
> image_display is a global variable, so that alone makes the first the
> best method to use.
>
> But this is probably best:
>
>[/color]
document.getEle mentById('image _display').pare ntNode.removeCh ild('image_disp l
ay');[color=blue]
>
> The problem with the first one is that if there is any white space or
> anything else in the parent element, then the image won't be the first
> child.
>
> --
> Randy
> comp.lang.javas cript FAQ - http://jibbering.com/faq[/color]

Randy,

I tried
var image_display=d ocument.createE lement('img');
image_display.s rc='file://' + field;
document.getEle mentById('num1' ).appendChild(i mage_display);
alert("test");
document.getEle mentById('num1' ).parentNode.re moveChild('imag e_display');
with <div id="num1"></div>
Image was created but not removed

var image_display=d ocument.createE lement('img');
image_display.s rc='file://' + field;
document.getEle mentById('image _display').appe ndChild(image_d isplay);
alert("test");
document.getEle mentById('image _display').pare ntNode.removeCh ild('image_disp l
ay');
<div id='image_displ ay' ></div>
Image was created but not removed

Ken

[Michael Winter]

Re: Compatibility

On Wed, 27 Oct 2004 07:38:35 GMT, Ken <kkrolski@wi.rr .com> wrote:

[snip]
[color=blue]
> I tried
> var image_display=d ocument.createE lement('img');
> image_display.s rc='file://' + field;[/color]

Images, even dynamically added ones, should have an alt attribute.
[color=blue]
> document.getEle mentById('num1' ).appendChild(i mage_display);[/color]

No problem here.
[color=blue]
> document.getEle mentById('num1' ).parentNode.re moveChild(
> 'image_display' );[/color]

This won't work for two very obvious reasons.

1) The removeChild method expects an object reference, not a string. This
would have caused an error.
2) Even if removeChild was passed a reference, you should still have found
an error as the image is not a sibling of the DIV, but its child. In other
words, the parentNode property simply shouldn't be in that statement.

document.getEle mentById('num1' ).removeChild(i mage_display);

[snip]

The second example is exactly the same as the first. You're just using
different names.

By the way, I hope you're using feature detection and more defensive
programming than you're displaying here.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Michael Winter]

[OT] Re: Compatibility

On Tue, 26 Oct 2004 23:03:16 -0400, Randy Webb <HikksNotAtHome @aol.com>
wrote:

[snip]
[color=blue]
> In fact, document.getEle mentById['myDiv'] does not even work in IE nor
> any other browser.[/color]

Oddly enough, that's what Opera has to try to execute in the Downloads
section of nVidia's nZone (<URL:http://www.nzone.com/>) web site.

The product of generally poor scripting, eval use, and browser detection.
I sent them an e-mail, but I doubt anything will come of it.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Lasse Reichstein Nielsen]

Re: Compatibility

Randy Webb <HikksNotAtHome @aol.com> writes:
[color=blue]
> document.getEle mentById('image _display').pare ntNode.removeCh ild('image_disp lay');
>[/color]

You can't remove strings with removeChild :)
What you perhaps meant is:

var image = document.getEle mentById('image _display');
image.parentNod e.removeChild(i mage);

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Randy Webb]

Re: Compatibility

Lasse Reichstein Nielsen wrote:[color=blue]
> Randy Webb <HikksNotAtHome @aol.com> writes:
>
>[color=green]
>>document.getE lementById('ima ge_display').pa rentNode.remove Child('image_di splay');
>>[/color]
>
>
> You can't remove strings with removeChild :)[/color]

That will teach me to type off the top of my head :-)
[color=blue]
> What you perhaps meant is:
>
> var image = document.getEle mentById('image _display');
> image.parentNod e.removeChild(i mage);[/color]

Yes and thanks.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Ken]

Re: Compatibility

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message
news:opsgiuukkp x13kvk@atlantis ...[color=blue]
> On Wed, 27 Oct 2004 07:38:35 GMT, Ken <kkrolski@wi.rr .com> wrote:
>
> [snip]
>[color=green]
> > I tried
> > var image_display=d ocument.createE lement('img');
> > image_display.s rc='file://' + field;[/color]
>
> Images, even dynamically added ones, should have an alt attribute.
>[color=green]
> > document.getEle mentById('num1' ).appendChild(i mage_display);[/color]
>
> No problem here.
>[color=green]
> > document.getEle mentById('num1' ).parentNode.re moveChild(
> > 'image_display' );[/color]
>
> This won't work for two very obvious reasons.
>
> 1) The removeChild method expects an object reference, not a string. This
> would have caused an error.
> 2) Even if removeChild was passed a reference, you should still have found
> an error as the image is not a sibling of the DIV, but its child. In other
> words, the parentNode property simply shouldn't be in that statement.
>
> document.getEle mentById('num1' ).removeChild(i mage_display);
>
> [snip]
>
> The second example is exactly the same as the first. You're just using
> different names.
>
> By the way, I hope you're using feature detection and more defensive
> programming than you're displaying here.
>
> Mike
>
> --
> Michael Winter
> Replace ".invalid" with ".uk" to reply by e-mail.[/color]

Michael,
I am using feature detection and defensive programming.

I try to only paste the script in question. Quite a bit was not pasted.

Thanks for the comments.

Ken