Delete element using javascript

Question

I have a textbox. On focus I call a javascript function in which I create a new element with this way:

var label = document.createElement("label");
label.innerHTML = "*For a more secure password use letters and digits";
document.getElementById('picturediv').appendChild(label);

But onblur I call another function and then I want to remove this element. I've tried with the remove but it is not working. I am not sure if the remove is suitable for that.

removeChild is the function you need.

user1150525
– user1150525

2012-04-28 09:38:29 +00:00
Commented Apr 28, 2012 at 9:38 — user1150525
– user1150525, Commented Apr 28, 2012 at 9:38
these are not the droids you're looking for.

Jonathan Payne
– Jonathan Payne

2012-04-28 09:40:12 +00:00
Commented Apr 28, 2012 at 9:40 — Jonathan Payne
– Jonathan Payne, Commented Apr 28, 2012 at 9:40

score 2 · Accepted Answer · 2012-04-28 11:53:55Z

2

You can remove it this way:

function removeLabel() {
    document.getElementById('picturediv').removeChild(document.getElementById('picturediv').getElementsByTagName('label')[document.getElementById('picturediv').getElementsByTagName('label').length - 1]);
}

edit:

The function with comments:

function removeLabel() {
    var parentNode = document.getElementById('picturediv'); // The parentNode of the label element

    var tagsWithLabel = parentNode.getElementsByTagName('label'); // All elements with tag name label

    var length = tagsWithLabel.length; // The length of the node array

    parentNode.removeChild(tagsWithLabel[length - 1]); // Deleting the last element with tage name label from parentNode.
}

edit because of comment:

function removeLabel(id) {
    document.getElementById(id).removeChild(document.getElementById(id).getElementsByTagName('label')[document.getElementById(id).getElementsByTagName('label').length - 1]);
}

to delete label 1: removeLabel('picturediv'); to delete label 2: removeLabel('picturediv2');

edited Apr 28, 2012 at 11:53

answered Apr 28, 2012 at 9:40

user1150525

Sign up to request clarification or add additional context in comments.

5 Comments

anna Over a year ago

Hi again! I want to give a different name to the label. I create the label but i can't delete. Probably I am doing something wrong but I can't figure out whta! I am using this line. Is this ok? document.getElementById('picturediv2').removeChild(document.getElementById('picturediv2').getElementsByTagName('label2')[document.getElementById('picturediv2').getElementsByTagName('label2').length - 1]);

anna Over a year ago

I create the new element with these lines: var label2 = document.createElement("label"); label2.innerHTML = "Your password should be 6 to 20 characters long."; document.getElementById('picturediv2').appendChild(label2);

anna Over a year ago

if I change this createElement("label") to this createElement("label2") it works fine... but it does not make sense for me. Also I tried to do the same for an image and it works only if i name everything "img". Here is the code var img = document.createElement("img"); img.setAttribute('alt', 'attention'); img.setAttribute('width', '20px'); img.setAttribute('src', 'images/attention!.png'); document.getElementById('picturediv2').appendChild(img);

user1150525 Over a year ago

@anna i edited my answer again. Please try the last code (removeLabel(id)).

anna Over a year ago

Unfortunatelly I can't upvote for you more than once. Thank you sooooo much for your help. Maybe I will send you again, if i have other problems!!! Thank you once again!!!

Collectives™ on Stack Overflow

Delete element using javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related