Trying to delete element with Javascript

Question

When a client clicks the "buy" button, I create a popup on screen which allows them to fill in a purchase form. On the poput I want to have a "x" button so they can close it and return to the main website.

The code I run to generate the popup is:

var o = document.createElement('div');
o.className = 'overlay';

var p = document.createElement('div');
p.className = 'buyticketid';
p.setAttribute('id','buy-ticket');

var cb = document.createElement('p');
cb.className = 'closeButton';
cb.setAttribute('onclick','close()');
cb.setAttribute('title','Close');
cb.setAttribute('id','close-btn');
var x = document.createTextNode('x');
cb.appendChild(x);

p.appendChild(cb);

document.getElementsByTagName('body')[0].appendChild(o);
document.getElementsByTagName('body')[0].appendChild(p);

The code I use to try and delete the popup (ID = 'buy-ticket') is:

function close(){

var element = document.getElementById("buy-ticket");
element.parentNode.removeChild(element);

}

For some reason when I click the close button nothing happens. If anyone could point me in the right direction that would be awesome.

sjkm · Accepted Answer · 2014-05-18 11:25:17Z

2

you can assign a click handler to a dom element like this: element.onclick = callback; where callback is your callback function.

This works as expected:

function close(){
    var element = document.getElementById("buy-ticket");
    element.parentNode.removeChild(element);
}  

var o = document.createElement('div');
o.className = 'overlay';

var p = document.createElement('div');
p.className = 'buyticketid';
p.setAttribute('id','buy-ticket');

var cb = document.createElement('p');
cb.className = 'closeButton';
cb.onclick = close;
cb.setAttribute('title','Close');
cb.setAttribute('id','close-btn');
var x = document.createTextNode('x');
cb.appendChild(x);

p.appendChild(cb);

document.getElementsByTagName('body')[0].appendChild(o);
document.getElementsByTagName('body')[0].appendChild(p);

answered May 18, 2014 at 11:25

sjkm

3,9572 gold badges28 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Trying to delete element with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related