试图用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.

Answer 1

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);