javascript - 单击可隐藏任何元素

Question

我只是想编写一些简单的 JavaScript 代码来隐藏我点击的网页中的任何元素。我将使用此代码作为书签或在控制台中。

到目前为止我已经编写了以下代码

var deleteLinks = document.querySelectorAll('.myelement');

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
console.log("hi");
             event.preventDefault();
this.remove();

    });
});

上面的代码所做的是，当我单击任何元素时，它只会隐藏它。但我需要执行以下操作。

• 我需要阻止我单击的所有元素的默认值。(在我的
情况下我的代码仅在我单击 class .myelement) 时才有效
  • 当我有多个具有相同类或 ID 的元素时，所有元素都应隐藏或删除

我尝试了下面的代码，但它获取主体类名，如何获取当前元素类名。

var deleteLinks = document.querySelectorAll('body');

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
              event.preventDefault();
console.log(this.className);

    });
});

Answer 1

这是工作示例。

代码片段

var deleteLinks = document.querySelectorAll('body *');

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault();

        if(this.className != '') {
            var combineClassNames = this.className.replace(' ', '.');
            var links = document.querySelectorAll('.' + combineClassNames);

            Array.from(links).forEach(inner => {
                inner.remove();
            });
        }
        else {
            this.remove();
        }
    });
});

fiddle : https://jsfiddle.net/3fgc5uhv/5/