JavaScript How to remove a child

Question

Using javascript, I am adding two buttons, one will add a picture and the other will delete a picture. I'm just practicing for an exam...

The button and function to add the picture work beautifully, I am struggling with the function to delete the picture. If I add the two buttons, and the picture to the website, and add an id to the picture, and delete that picture through the ID. But if I only the two buttons and try to start adding pictures, then I would have no ID, so I am lost!

The deleteMe function below works fine deleting that first picture. But I don't want to have any pictures when I load the website, I only want to have the two buttons to add and remove. So I don't know how to remove the elements. Here is what I have so far for the two functions, thanks!!!:

function deleteMe(){
    var toDelete = document.getElementById('image23');
    toDelete.parentNode.removeChild(toDelete);
}

function addMe(){

    var img = document.createElement('IMG');
    img.setAttribute("src", "elephant.jpg");
    img.setAttribute("width", "60");
    img.setAttribute("height", "60");
    document.body.appendChild(img);

}

Where are you getting the 'image23'? I don't see you giving it that ID in the addMe — rp.beltran, Mar 09 '16 at 22:14
You might try document.getElementsByTagName("IMG")[0] to locate your image, then you don't have to set an ID. — sakurashinken, Mar 09 '16 at 22:15
That's the thing, that is if I add an image first, then I can do this: — Rp Ck, Mar 09 '16 at 22:15
Multiple. Every time I click on the "ADD" button, it adds an image, so I want that everytime I click on the "DELETE" button, it deletes an images too. The add function works perfectly, but no the delete function. — Rp Ck, Mar 09 '16 at 22:22
Ok, then instead of the method I proposed, I think sakurshinken's is better, but you should add a class to it so that it doesn't just find any image on your page. I will update my answer — rp.beltran, Mar 09 '16 at 22:24
Great! the TagName does the trick beautiful. Thanks guys!!!!! — Rp Ck, Mar 09 '16 at 22:26
I spent two hours trying to figure it out on my own before posting my question :( — Rp Ck, Mar 09 '16 at 22:27

score 0 · Answer 1 · answered Mar 09 '16 at 22:17

0

document.body.removeChild(toDelete);

answered Mar 09 '16 at 22:17

Zain Hatim

80
6

rp.beltran · Answer 2 · 2016-03-09T22:30:19.737

I think you forgot to give the image you are creating an ID.

You are using:

var toDelete = document.getElementById('image23');

To get the image you are removing, but you never assign that id to the image. To add the ID when you make your image, use either:

img.setAttribute("id", "image23");

or

img.id = 'image23'

Edit

If you are allowing multiple images to be added, and only want to delete them one at a time, then I think the method sakurashinken commented is probably more ideal, however instead of grabbing by:

document.getElementsByTagName("IMG")[0]

You should use a class, incase you have other images on your page.

That would make your new addMe:

...
img.setAttribute("src", "elephant.jpg");
img.className = 'deletebybutton';
img.setAttribute("width", "60");
...

And your new deleteMe:

var toDelete = document.getElementsByClassName("deletebybutton")[0];
toDelete.parentNode.removeChild(toDelete);

JavaScript How to remove a child

2 Answers2

Edit