在 javascript 小书签中创建 close me link 时出现问题

Question

我正在尝试向此功能添加一个 close me link。它的工作方式是将所有这些不带换行符的代码粘贴到书签中，书签会在屏幕上显示一个蓝色框。

这是我目前所拥有的，关闭我 link 我创建的是我创建的 "eleCloseLink" 节点：

javascript:(
  function(){

var pagebody = document.evaluate( '/html/body' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
if (pagebody != null) {
  var node = document.createElement("DIV");
   node.style.position="fixed";
   node.style.color="white";
   node.style.background="blue";
   node.style.width="350px";
   node.style.top="50px";
   node.innerHTML = "<br>BLUE BOX<br>2<br>";

   var box = pagebody.appendChild(node);

   /* Creating close link here */
   var eleCloseLink = document.createElement("a");
   eleCloseLink.setAttribute('href', 'javascript:( function(){ node.parentNode.removeChild(node); })();');
   eleCloseLink.innerHTML = 'close me';
   box.appendChild(eleCloseLink);

}

})();

到目前为止，我已经尝试了大约 10 种不同的方法，并且 none 都成功了。最近的方法是将 javascript:( function(){ node.parentNode.removeChild(node); })(); 放在 a 中，但这也不起作用。我觉得这应该是最常见的代码之一，因为我经常在网站上看到它们，因此应该有很多信息。我的场景可能比大多数情况更具体 b/c 我正在创建的框只是一个 DIV 元素，我实际上是在尝试删除 DIV 元素（我尝试将其用作好吧）与我亲密 link。如果有人对如何创建此关闭我有任何建议，请告诉我 link。

Answer 1

为了解决这个问题，我创建了一个点击事件侦听器，它调用了一个函数来移除对象。为此，我向试图删除的 DIV 对象添加了 id 属性。当点击事件被触发时，close 函数然后通过 id 属性使用 XPATH 引用评估 div 对象。然后我能够运行该对象上的 remove() 方法。

结尾片段：

   /*Create Link in box to close box*/
   var eleCloseLink = document.createElement("a");

   eleCloseLink.innerHTML = '|CLOSE|';
   eleCloseLink.addEventListener("click", CloseBox, false);
   eleCloseLink.background = 'red';
   box.appendChild(eleCloseLink);
 }

 /*Function to close the box */
 function CloseBox() {
    document.evaluate( "//*[@id='thebox']" ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue.remove(this);
 }

仍然不完全确定我是否必须在 remove() 方法中使用 "this"，因为我在对象本身上调用 remove() 方法。然而，这现在正在工作。

在 javascript 小书签中创建 close me link 时出现问题

Problems creating close me link in javascript bookmarklet

html

javascript

bookmarklet