Question

当客户点击“购买”按钮时，我会在屏幕上创建一个弹出窗口，允许他们填写购买表单。在poput我想要一个“x”按钮，这样他们就可以关闭它并返回主网站。

我生成弹出窗口的代码是：

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

我用来尝试删除弹出窗口的代码（ID ='buy-ticket'）是：

function close(){

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

}

出于某种原因，当我点击关闭按钮时没有任何反应。如果有人能指出我正确的方向，那就太棒了。

Answer 1

您可以将点击处理程序分配给dom元素，如下所示： element.onclick = callback; 其中回调是您的回调函数。

这可以按预期工作：

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

试图用Javascript删除元素

1 个答案: