Как отменить удаление элемента с помощью mutationobserver?

Question

[Евгений]

С помощью mutationobserver с настройкой {childList: true} можно отслеживать удаление и добавление элементов на страницу. Как с его помощью отменять удаления?

Answer 1

[Сергей Соколов]

В коллбэк передаётся ссылка на удалённый(-е) элемент(ы).

Аргумент коллбэка – массив MutationRecord'ов. При единичном удалении там один элемент. У него есть свойство removedNodes — это NodeList удалённых элементов.

spoiler

(1) […]
​  0: MutationRecord
​​  addedNodes: NodeList []
​​  attributeName: null
​​  attributeNamespace: null
​​  nextSibling: #text "
  "
​​  oldValue: null
​​  previousSibling: #text "
  "
​​  removedNodes: NodeList(1)
​​​    0: <li id="to-delete">
​​​    length: 1
​​​    <prototype>: NodeListPrototype { item: item(), keys: keys(), values: values(), … }
​​  target: <ul id="someElement">
​​  type: "childList"
​​  <prototype>: MutationRecordPrototype { type: Getter, target: Getter, addedNodes: Getter, … }
  length: 1
​  <prototype>: Array []

Можно тут же их попробовать вставить назад в родителя, хотя бы в конец: