Skip to content

Commit cb3463c

Browse files
committed
feat(dom): added snippet to clean up the page
1 parent c955839 commit cb3463c

File tree

3 files changed

+58
-1
lines changed

3 files changed

+58
-1
lines changed

README.md

+5
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ if your [exception handler](http://glebbahmutov.com/blog/catch-all-errors-in-ang
9494

9595
* [github-pull-request-template.js](github-pull-request-template.js) - better GitHub pull request
9696
text, based on the blog post [Enforce standards while submitting a pull request](http://krasimirtsonev.com/blog/article/enforce-standards-while-submitting-a-pull-request) by [Krasimir Tsonev](https://github.com/krasimir).
97+
* [remove-all-but.js](remove-all-but.js) - removes all elements in the page, except the ones in
98+
the trees with specified selectors. Can be used to quickly clean up the page and leave just the essentials.
9799

98100
All snippets, including mine are distributed under MIT license.
99101

@@ -102,6 +104,9 @@ All snippets, including mine are distributed under MIT license.
102104
You can update local code snippets by downloading new versions from this github repository.
103105
Create a new code snippet and copy the source from [update-code-snippets.js](update-code-snippets.js).
104106

107+
Note: the approach below does not work any more,
108+
see [the open issue](https://github.com/bahmutov/code-snippets/issues/23).
109+
105110
You will run this code snippet in an unusual way. First, open any web page, even an empty tab.
106111
Open the DevTools in **undocked** mode (Command+Option+I on Mac). Then open the DevTools **again**,
107112
*while focused* on the first DevTools. This will open the second DevTools instance with the source for the

remove-all-but.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
Removes all elements except for the trees rooted
3+
in the given selectors.
4+
5+
For example, given a document
6+
7+
body
8+
div.foo
9+
span
10+
div#bar
11+
div#baz
12+
hello
13+
14+
and command with selectors ('.foo', '#baz') will leave
15+
everything in place, but command ('#baz') will leave just
16+
17+
body
18+
div#bar
19+
div#baz
20+
hello
21+
*/
22+
(function hideAllBut() {
23+
function toArray(what) {
24+
return Array.prototype.slice.call(what, 0);
25+
}
26+
const selectors = toArray(arguments);
27+
if (!selectors.length) {
28+
throw new Error('Need at least one selector to leave');
29+
}
30+
31+
const keep = selectors.map(function (selector) {
32+
return document.querySelector(selector);
33+
});
34+
35+
function shouldKeep(el) {
36+
return keep.some(function (keepElement) {
37+
return keepElement.contains(el) || el.contains(keepElement);
38+
});
39+
}
40+
41+
const all = toArray(document.body.querySelectorAll('*'), 0);
42+
var removed = 0;
43+
44+
all.forEach(function (el) {
45+
if (!shouldKeep(el)) {
46+
el.parentNode.removeChild(el);
47+
removed += 1;
48+
}
49+
});
50+
51+
console.log('removed %d elements', removed);
52+
}('.foo', '#baz'));

utils/.jshintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"debug" : false,
3131
"eqnull" : false,
3232
"es5" : false,
33-
"esnext" : false,
33+
"esnext" : true,
3434
"moz" : false,
3535
"evil" : false,
3636
"expr" : false,

0 commit comments

Comments
 (0)