Tags:
javascript

Remove empty tag with javascript
July 17, 2008 6:16 PM Subscribe

I need some help creating some javascript that will remove an empty img tag.

Ok.. So i have the following code in my page. What i am looking to do, is add the ability to remove the empty img tag(<img src="">) by clicking on the Select All button.

If you can show me how to code that, or point me in the right direction (keeping in mind that I have 0 experience with js), I would be greatly appreciative.

Note: Having the script run by clicking on this button isn't really what i want, but the way I see it (which may be, and usually is wrong) seems like the only way to make sure it only runs on the one page i need it to run on. The site consists of many, many includes. The page I need the script on is structured like so... main.html (containing the HEAD and BODY tag) and then page_i_want_script_to_run.html (containing the code I want the script to run on). Is there a way to get the script to run on page_i_want_script_to_run.html automatically on page load, without putting it in the BODY tag of main.html? If so, I would probably go that route.


<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</script>

</HEAD>
<BODY>



<form name="it">
<div align="center">
<input onclick="copyit('it.select1')" type="button" value="Select All" name="cpy">
<textarea class="code" name="select1" rows="3" cols="25">
<img src="example.jpg">
<img src=""> 
<img src="example2.jpg">
</textarea>
</div>
</form>

posted by B(oYo)BIES to computers & internet (12 comments total)

I reread your question a few times, but I'm not seeing it: Why can't you just edit the HTML? Perhaps that not an option, but whenever possible, I'm a "cure the disease, not the symptoms" type of guy.
posted by niles at 6:49 PM on July 17, 2008

If you can surround each img tag with a div or span and then give each a unique id this may help.

function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

Found Here
posted by dyno04 at 7:16 PM on July 17, 2008

This is really easy with JQuery: $(img[src=""]).remove();
posted by Nelsormensch at 9:19 PM on July 17, 2008

The below JavaScript should remove all img tags from a page the src being blank. There's no need to wrap it around a div or span.

var imgTags = document.getElementsByTagName("img");
for(var i = 0; i <> if(imgTags[i].getAttribute("src") === "")
imgTags[i].parentNode.removeChild(imgTags[i]);
}

I'll admit that the jQuery version is much nicer but sometimes you don't want to use a library.

If you don't know much about JavaScript, I'd recommend getting a book such as JavaScript: The Definitive Guide to get to grips with it, or at least using Mozilla's reference for the DOM and JavaScript.
posted by HaloMan at 12:20 AM on July 18, 2008

Sadly the site mangled my above code. I meant this:

var imgTags = document.getElementsByTagName("img");
for(var i = 0; i < imgTags.length; i++) {
if(imgTags[i].getAttribute("src") === "")
imgTags[i].parentNode.removeChild(imgTags[i]);
}
posted by HaloMan at 12:23 AM on July 18, 2008

Is there a way to get the script to run on page_i_want_script_to_run.html automatically on page load, without putting it in the BODY tag of main.html? If so, I would probably go that route.

If you put the code in a SCRIPT tag at the bottom of page_i_want_script_to_run.html, it will only run if that include is loaded and only when the other HTML code on that page has been read. If you want it to run just as if it had been included in the body ONLOAD attribute, you can extend that attribute within the script itself with

window.onload = window.onload+ 'removeImg()'

(this way you don't overwrite any other onload events you may have).

To be cleaner, you should put your code in a .js file and refer to it in the SCRIPT tag via the SRC attribute so you can reuse it on other pages if required.
posted by Sparx at 4:40 AM on July 18, 2008

Neither of the above solutions seem to be working.

http://thelastreal.com/rmv_img.html

See something I am doing wrong?
posted by B(oYo)BIES at 9:17 AM on July 18, 2008

I think the jQuery example should be $('img[src=""]').remove();
posted by JonB at 12:17 PM on July 18, 2008

Or for the javascript part you need to move the script below the image tag. Basically that script is running as the page loads and it doesn't know there is an img tag there yet. Put it at the end of the page to be sure you get all img tags on the page.
posted by unsigned at 12:28 PM on July 18, 2008

That unfortunately did not work either. Thanks for giving it a shot.
posted by B(oYo)BIES at 12:29 PM on July 18, 2008

unsigned - Your the man. Thank you!
posted by B(oYo)BIES at 12:30 PM on July 18, 2008

lady but thanks!
posted by unsigned at 12:32 PM on July 18, 2008

« Older How can I make a photo collage... | My father and I were on the Fe... Newer »

This thread is closed to new comments.

Remove empty tag with javascript July 17, 2008 6:16 PM Subscribe

Remove empty tag with javascript
July 17, 2008 6:16 PM Subscribe