adding onclick event to javascript dynamically created element

Question

I'm dynamically adding labels to my table when user selects combo box items, but also I want these dynamically added labels to be erasable when user clicks on them, here is my javascript function:

    function OnSelectedIndexChange()

{
    if (document.getElementById('cmbDestinationUser').selectedIndex != 0) {
        var spanTag = document.createElement("span");
        spanTag.id = "span1";
        var e = document.getElementById("cmbDestinationUser");
        var strUser = e.options[e.selectedIndex].text;
        spanTag.innerHTML = strUser;
        var TR = document.createElement('tr');
        var TD = document.createElement('td');
        TD.appendChild(spanTag);
        TR.appendChild(TD);
        document.getElementById('tblReceivers').appendChild(TR);
    }
    document.getElementById('cmbDestinationUser').selectedIndex = 0;
}

should I add onclick to spantag? how can I do so? should I create another function for erasing or can I define the remove operation in this function thanks

Check this link might be helpful

Anil Namde
– Anil Namde

2011-12-09 13:28:11 +00:00
Commented Dec 9, 2011 at 13:28 — Anil Namde
– Anil Namde, Commented Dec 9, 2011 at 13:28

RightSaidFred · Accepted Answer · 2011-12-09 13:53:43Z

7

Yes, add the onclick to the span:

spanTag.onclick = function() {
    this.innerHTML = '';
};

This just clears the content of the span. I wasn't sure exactly what you meant by "erasing".

If you wanted to remove the span entirely, do this:

spanTag.onclick = function() {
    this.parentNode.removeChild( this );
};

To remove the row, do this:

spanTag.onclick = function() {
    var el = this;
    while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );

    if( el )
        el.parentNode.removeChild( el );
};

Or to make it a little clearer perhaps:

spanTag.onclick = function() {
    var el = this.parentNode;
    while( el ) {
       if( el.nodeName.toLowerCase() === 'tr' ) {
           el.parentNode.removeChild( el );
           break;
       }
       el = el.parentNode;
    } 
};

edited Dec 9, 2011 at 13:53

answered Dec 9, 2011 at 13:26

RightSaidFred

11.3k38 silver badges36 bronze badges

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

4 Comments

Ali_dotNet Over a year ago

oh thanks I mean removing the newly creating element, I'll give it a try

Ali_dotNet Over a year ago

thanks but I must remove the row containing this span, i.e. TR should be removed, how can I perform this?

Ali_dotNet Over a year ago

thanks Fred, it worked just as expected, can I ask another question in this post? I want to check for duplicate labels, I mean when adding a span, its content should be checked and if it previously exists nothing happens, should I create a new post for this question?

RightSaidFred Over a year ago

@Ali_dotNet: That sounds like a separate issue. I'd start a new question.

Munter · Accepted Answer · 2011-12-09 14:01:05Z

2

You should really use event delegation instead of setting an event handler on each node you create.

This way you can assign a single event handler to the table around the table rows, which handles all clicks on all rows and removes that row. You set it once only.

table.onclick = function (e) {
    var target = e.target || window.event.srcElement;

    while (target.nodeName !== 'TR') {
        target = target.parentNode;
    }
    target.parentNode.reamoveChild(target);
}

answered Dec 9, 2011 at 14:01

Munter

1,0895 silver badges7 bronze badges

Collectives™ on Stack Overflow

adding onclick event to javascript dynamically created element

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related