Ken wrote:
"Ken" <kk******@wi.rr.com> wrote in messageI am trying to create one image using JavaScript; then later in the script
remove the image - not just remove the src.
The following creates the image, but I have been unable to remove it.
[snip]
I have been experimenting with both approaches. The results have been
inconsistent. Sometime the approach works and other times it does not.
I have tried to display the tree associated with Id=num1 with little
results. I keep getting either undefined or [object].
Below is some code to add and remove images to a page from a local file
system. Tested in IE 6 and Firefox, modify for your purpose.
If you are trying to add an image, then remove it within the one
script, I suggest you split the add and remove bits to separate
functions and call them from your main script. IE and other browsers
seem a little finicky about adding/removing items within the one script,
putting them into separate functions makes them work perfectly for me.
Rob.
<html>
<head><title>Add your images...</title>
<style type="text/css">
body
{font-family: arial, sans-serif;}
p
{font-size: 80%;}
div
{border-bottom: thin solid blue;
padding: 10 0 10 0;
}
</style>
<script type="text/javascript">
function addImage(p,d){
// alert(p);
if (p == '') {
alert('Please enter file path to your image,'
+ ' or use the \'Browse...\' button'
+ '\nto locate an image to add to the page, then '
+ 'click the "Add image" button');
return;
} else {
if (document.getElementById) {
newDiv = document.createElement('div');
document.getElementById(d).appendChild(newDiv)
var tagText = ''
+ '<img src="' + 'file://' + p
+ '" alt="' + p + '"><br>'
+ '<form action="">'
+ '<h3>Image path: ' + p
+ '<input type="button" style="margin-left: 20;"'
+ ' value="Click to remove image"'
+ ' onclick="removeImage(this.form.parentNode);">'
+ '</h3>'
+ '</form>'
;
newDiv.innerHTML = tagText;
} else {
alert('No support for getElementById.\n'
+ 'Use another method');
} } }
function removeImage(x) {
// alert(x);
x.parentNode.removeChild(x);
}
</script>
</head>
<body>
<h2>Add images to this page</h2>
<form action="">
<p>
<label title="Choose an image to upload" for="filePath">
<span style="color: 336699;"> File path....</span>
<br>
<input type="file" id="filePath"
name="filePath" size="60"></label>
<label title="Add an image to this page">
<input type="button" value="Add image"
onclick="addImage(this.form.filePath.value,'imageD iv');">
</label>
<label title="Clear the file path">
<input type="reset" value="Reset"></label>
</p>
</form>
<div id="imageDiv"
style="border-top: thin solid blue; border-bottom: none;"></div>
</body>
</html>