Question

单击隐藏任何元素

2018-01-03

67

javascript

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

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

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

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

    });
});

上面的代码的作用是，当我单击任何元素时，它就会隐藏它。但我需要做以下事情。

我需要在单击的所有元素上都设置preventDefault。 （在我的例子中，我的代码仅在单击类 .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/