javascript - removing an appended element using javascript/closure?

Question

I currently have a click event in place that when selected appends a search box to .header, this is done using google closure. My problem now is if I click a close button I want to remove this appended element. I know using jQuery requires only .remove() but Im unsure how to achieve this in closure or vanilla js. Can anyone advise how I can do this?

Current code:

if(goog.dom.getElementsByClass('pe')){
    var searchCtn = goog.dom.getElementsByClass('search');     
    var headerWrapper = goog.dom.getElementByClass('header');     
    goog.dom.append(headerWrapper,searchCtn); 
} 

var closeButton = goog.dom.getElement('close');
    goog.events.listen(closeButton, goog.events.EventType.CLICK, function() {
    console.log('Remove appended');
}, false, this); 

Answer 1

功能是这样的：

goog.dom.removeNode = function(node) {
  return node && node.parentNode ? node.parentNode.removeChild(node) : null;
};

所以代码如下（假设搜索框是关闭按钮的父级）：

goog.events.listen(closeButton, goog.events.EventType.CLICK, function() {
    goog.dom.removeNode(this.parentNode);
}, false, this); 

Answer 2

只需使用element.removeChild(y)

$(function() {
  $('span').click(function() {    
    this.parentNode.removeChild(this);
  });
});

那是 jquery，但很容易转换为普通的旧 javascript 或您所在的任何框架。