javascript - 通过 onclick 添加/删除元素

Question

我有一个用纯 JS 编写的 chrome 扩展，它基本上由将数据附加到页面上的链接的函数组成。

基本上只是将点击整数附加到从另一个函数传入的链接元素的函数示例:

function addCounttoLinks(link, counts) {
    var clicks = counts.split(":")[1].split(",")[0].trim();
    var count = document.createTextNode((" (" + clicks + ")"));
    var dspan = document.createElement("span");
    dspan.appendChild(count);
    dspan.style.fontSize = "10px"; dspan.style.textAlign = "center";
    link.appendChild(dspan); 
} 

执行/取消执行这些功能的最有效方法是什么，以便我可以实现一个“开/关”按钮，供用户单击以添加/删除扩展程序附加的数据。编写函数来删除先前创建的元素是唯一的解决方案吗？

Answer 1

在 span 上放置一个类(例如 my-nifty-extension-extra - 您希望它不太可能与其他内容发生冲突)，然后添加隐藏数据时添加到 body 的类(例如 hide-my-nifty-extension)，并在显示数据时将其删除。然后使用这个样式规则:

body.hide-my-nifty-extension span.my-nifty-extension-extra {
    display: none;
}

例如，在您的 appendChild 之前:

dspan.className = "my-nifty-extension-extra";

然后:

function showExtraData() {
    document.body.classList.remove('hide-my-nifty-extension');
}

function hideExtraData() {
    document.body.classList.add('hide-my-nifty-extension');
}

(编写 Chrome 扩展程序的乐趣之一是您知道自己拥有像 classList 这样的东西。)