blocks|key|783912|text|如果您对跨浏览器支持感兴趣，"on元素删除“并不是HTML+4事件，所以我认为您在这里可能不太走运。但是，我认为如果您采用了另一种策略，您会很幸运:由于您正在执行移除操作，限制了元素可以被删除的方式()。然后只在那里调用回调，而不是在事件处理程序中调用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|783913|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/jsref_events.asp^0|2E|E|P|8|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

If you're interested in cross-browser support, "on element removal" isn't <a href="http://www.w3schools.com/jsref/jsref_events.asp" rel="nofollow noreferrer">an HTML 4 event</a>, so I think you might be out of luck here. However, I think you'd have some luck if you adopted an alternate strategy: since you're doing the removing, constrain the ways in which the element can be removed. Then simply invoke the callback there instead of in an event handler.

blocks|key|2308424|text|您定义了一些称为DOM突变事件的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2308425|http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents|offset|length|2308426|目前，这只适用于Firefox，而不适用于Internet。|2308427|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|2G|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

You have something called DOM mutation events defined:

<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents" rel="nofollow noreferrer">http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents</a>

Currently this only works in Firefox, not on Internet Explorer.

blocks|key|783964|text|直截了当的回答是不。当前的DOM实现不提供您可以挂钩以监视DOM更改的事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|783965|也许你可以在你的问题上补充一下为什么你需要这个，也许还有其他的选择。例如，如果DOM元素被代码删除，该代码是否可以被修改以参与观察者模式？|783966|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The straight answer is no. The current DOM implementations provide no event that you can hook to watch for DOM changes.

Perhaps you could add to your question why you need this, there may be alternatives. For example if the DOM element is removed by code could that code be modified to participate in an observer pattern?

blocks|key|923592|text|如果不是你，我想知道节点是如何被移除的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|923593|搬家后多久你需要知道？你能检查一下是否每秒钟有一次吗？|923594|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I'd like to know how the nodes are being removed if you aren't the one doing it.

How soon after the removal do you need to know? Can you just check to see if it's gone once a second?

blocks|key|2308470|text|我不是DOM专家，但您能重写removeChild方法吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2308471|如果它有效的话，它不是一个完美的解决方案，因为DOM元素离开的其他方法(例如，在它的一个优势上设置innerHTML+)。|2308472|您也可以在父级存储子计数。然后将该计数与实际的子计数进行比较。当然，这需要轮询，而不是事件。|2308473|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I'm no DOM expert, but could you override the removeChild method?

If it works, it's not a perfect solution, since the are other ways for a DOM element to go away (setting innerHTML on one of its ascendants, for instance).

You could also store, at the parent, a child count. Then compare that count to the actual child count. Of course, that would require polling, not an event.

blocks|key|784055|text|我在Javascript方面不是很强，但我很快就模仿了下面的代码，并且它在Firefox中工作。你可能会幸运地让它在其他浏览器中工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|784056|<ul+id="main">
++++<li+id="e1">Item+1</li>
++++<li+id="e2">Item+2</li>
</ul>

<script+type="text/javascript">
var+main+=+document.getElementById('main');
main.origRemoveChild+=+main.removeChild;
main.removeChild+=+function(child)+{
++++alert('Removing+element+'+%2B+child.tagName+%2B+'+with+id='+%2B+child.id);
++++this.origRemoveChild(child);
}
var+e1+=+document.getElementById('e1');
main.removeChild(e1);
</script>|code-block|syntax|javascript|784057|既然你更新了你的问题，我有另一个解决办法：|784058|removeFromDOM(e)+{
++++for+(var+i+=+0;+i+<+e.childNodes.length;+%2B%2Bi)+{
++++++++var+child+=+e.childNodes[i];
++++++++removeFromDOM(child);
++++++++if+(typeof+child.onremove+==+'function')+{
++++++++++++child.onremove();
++++++++}
++++++++e.removeChild(child);
++++}
}|784059|这将递归地删除每个嵌套节点。在删除之前，将尝试执行onremove方法。希望这能有所帮助。|offset|length|style|CODE|784060|entityMap^0|0|0|0|0|P|8|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I'm not strong in Javascript, but quickly mocked up the following code and it worked in Firefox. You may be lucky to get it working in other browsers.

<pre><code>&lt;ul id="main"&gt;
 &lt;li id="e1"&gt;Item 1&lt;/li&gt;
 &lt;li id="e2"&gt;Item 2&lt;/li&gt;
&lt;/ul&gt;

&lt;script type="text/javascript"&gt;
var main = document.getElementById('main');
main.origRemoveChild = main.removeChild;
main.removeChild = function(child) {
 alert('Removing element ' + child.tagName + ' with id=' + child.id);
 this.origRemoveChild(child);
}
var e1 = document.getElementById('e1');
main.removeChild(e1);
&lt;/script&gt;
</code></pre>

Since you updated your question I have another solution here:

<pre><code>removeFromDOM(e) {
 for (var i = 0; i &lt; e.childNodes.length; ++i) {
 var child = e.childNodes[i];
 removeFromDOM(child);
 if (typeof child.onremove == 'function') {
 child.onremove();
 }
 e.removeChild(child);
 }
}
</code></pre>

This will recursively delete every nested node. Before deleting it will try to execute <code>onremove</code> method is present. Hope that helps.

My initial research has come up empty and I am not sure if this is possible. I am looking for a solution using straight up javascript. I cannot use jQuery due to constraints of the device. Basically, I want to attach an event for when an element is removed and provide a function to execute.

[EDIT] 
We do the DOM manipulation via a function call. Right now, we currently don't traverse down the whole tree to remove every single element. We only remove the parent for instance. I was hoping to provide a shortcut by attaching to an event, but I guess I will have to go the long way around and provide the additional logic in the function. The reason I need this, is because we need to be able to run cleanup operations on the DOM when specific elements are removed.

Right now the priority is only Opera support, but I would like to accomplish a cross browser solution.

Is there a way to be notified by the DOM when an element is removed?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我的初步研究是空的，我不确定这是否可能。我正在寻找一个直接使用javascript的解决方案。由于设备的限制，我不能使用jQuery。基本上，我希望为删除元素时附加一个事件，并提供要执行的函数。编辑我们通过函数调用执行DOM操作。现在，我们不需要遍历整棵树来删除每个元素。例如，我们只删除父级。我本来希望通过附加到一个事件来提供一个快捷方式，但我想我得走很长的路，在函数中提供额外的逻辑。我之所以需要

问当元素被移除时，DOM是否有一种通知方式？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当元素被移除时，DOM是否有一种通知方式？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当元素被移除时，DOM是否有一种通知方式？
EN