Question

我使用以下代码替换html元素，我使用ng bootstrap中的ngbTypeahead。

HTML

    <input [resultTemplate]="rt" [ngbTypeahead]="search">
    <ng-template #rt let-r="result" let-t="term">
     <span class="dropdown-heading" [ngClass]="onType()">
     </span>
    </ng-template>

component

  import {ElementRef} from '@angular/core';

  class TestComponent {
    element;

    constructor(public elementRef: ElementRef) {}

    onType(): void {
     this.element = this.elementRef.nativeElement.getElementsByClassName('dropdown-heading');
     const element = document.createElement('b');
     const textnode = document.createTextNode("stack");
     element.appendChild(textnode);
     for (let i = 0; i < this.element.length; i++) {
       this.element[i].parentNode.replaceWith(element);
     }
    }
  }

获取以下错误。我该如何解决这个问题？

ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Answer 1

this.element是一个HTML集合。当你这样做

document.getElementsClassName('hello');

它返回一个与该类匹配的元素集合（它只能包含一个元素）因此，当您尝试执行this.element.parentNode时，您正在尝试查找数组的parentNode。

尝试this.element[0].parentNode.replaceWith(element);

Answer 2

您似乎遇到了逻辑错误。

您正在替换第一个元素的父及其所有内容。因此，删除集合中的所有其他元素。

第二次循环时，它会尝试替换不再在DOM中的元素。

Concider以下示例

const element = document.createElement('p');
const textnode = document.createTextNode("just goodbye");
element.appendChild(textnode);
document.getElementById('bye').parentNode.replaceWith(element);

<p>
  Hello World
  <span id="bye">And Goodbye</span>
</p>

如何解决无法执行＆＃39; removeChild＆＃39;在＆＃39; Node＆＃39;？

2 个答案: