Question

我正在编写一个Chrome扩展程序，旨在隐藏youtube上指定频道的视频。

我现在使用的解决方案如下：

var previousRendererAmount = 0;
window.setInterval( function() {
  var currentRendererAmount = $(removableRendererNameString).length;
  // Check if renderer amount har changed since last time (If not, we don't need to run the removal script.)
  if( currentRendererAmount != previousRendererAmount) {
    previousRendererAmount = currentRendererAmount;
    removeVideos();
  }
}, 20);

简单地说，它以20毫秒的间隔运行，并检查显示的视频缩略图是否已更改。如果有，则运行删除脚本。

但我真正想做的是在显示它们之前删除它们。类似于在创建DOM元素（及其子元素）时触发的事件处理程序。这可能吗？

Answer 1

是的，有可能。当某些DOM元素发生更改时，您可以使用MutationObserver添加回调。请使用示例https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

查看此页面

在我的示例中，您可以看到回调中的代码在添加新元素之前执行。这意味着您可以在显示之前删除不需要的元素。

＆＃13;

let btn = document.getElementById('btn');
let videos = document.getElementById('videos');
let nodeToAdd = document.createElement('div');
nodeToAdd.innerText = 'Video 3';

btn.addEventListener('click', function() {
  videos.appendChild(nodeToAdd);
  btn.parentNode.removeChild(btn);
});

let observer = new MutationObserver(
function(mutationsList) {
  for(let mutation of mutationsList) {
    if (mutation.type == 'childList') {
      alert('Hey, this msg is displayed first');
    }
  }
});

observer.observe(videos, {childList: true});

＆＃13;

<div id='videos'>
  <div>Video 1</div>
  <div>Video 2</div>
</div>

<button id='btn'>Add Video 3</button>

＆＃13;

如何在显示之前通过javascript / jquery删除html元素

1 个答案: