Delete non video stuff from CNN page

delete_non_video_stuff.js

const selectorsToRemove = [
  '._7eda40eb._34e5cb16._4564d500',
  'footer',
  '.ls-event-tray._8926d01d',
  '._56b5b25c',
  '._4b262fa5',
  '._3be0fd6a',
  '.Box-sc-1fet97o-0.outbrain__Container-oos1px-0.cnBIwK',
  '.courageous_pushdown_element',
  '[class^="template-basestyles__AdSlot"]' // big top ad video in FF 
];

selectorsToRemove.forEach(selector => {
  const element = document.querySelector(selector);
  if (element) {
    element.remove();
  }
});

// remove the weird little spacer divs
[
  '.Box-sc-1fet97o-0.cOxGLR',
  '.Box-sc-1fet97o-0.bRFjwV',
  '.Box-sc-1fet97o-0.kquQLB',
].forEach(selector => {
  const element = document.querySelector(selector);
  if (element) {
    element.style.padding = 0;
    const divs = document.querySelectorAll(`${selector} > div`);
    [...divs].forEach(div => div.remove());
  }
});

// make things teeny
// yes, `undefined` really is the other class on this element
document.querySelector('.f56c47ff.undefined').style.padding = 0;

// resize
document.querySelector('.ddd0e023').style.width = '93vw';

By and large copying and pasting random Javascript into your console is a poor idea, and I have no way to confirm I'm not sketchy, but I can at least offer documentation for the methods used above:

• document.querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
• document.querySelectorAll: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
• HTMLElement#style: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
• Element#remove: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
• Array#forEach: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach