错误-在‘Node’上执行'removeChild‘失败:参数1不是’Node‘类型的

Question

下午好。我正在开发一种增强现实的体验。我正在创建一个函数，其中触摸一个按钮执行一个createElement并创建一个实体(3D模型)。在那之前，一切都很好。然后，我正在开发另一个功能，以便在执行其中一个按钮的createElement时，删除另一个按钮的子元素，以防呈现它。

​

​

这样做的想法是，当您单击红色BSC时，从触摸红色ETH20派生的两个按钮被移除，但是我得到了错误'Uncaught :未能在'Node‘上执行'removeChild’：参数1不是‘Node’类型。

data.js

export const data = [
  {
    net: 'eth',
    model1: {
      id: 'eth-1',
      position: {x: 14, y: 5, z: 0},
      scale: {x: 1.5, y: 1.5, z: 1.5},
      model: 'asset-mana',
    },
    model2: {
      id: 'eth-2',
      position: {x: 14, y: 3, z: 0},
      scale: {x: 1.5, y: 1.5, z: 1.5},
      model: 'asset-sand',
    },
  },
  {
    net: 'bsc',
    model1: {
      id: 'bsc-1',
      position: {x: 14, y: 2, z: 0},
      scale: {x: 1.5, y: 1.5, z: 1.5},
      model: 'asset-cake',
    },
  },
]

​

utils.js

const removeInfoModels = () => {
    const infoModel1 = document.getElementById('eth-1')
    const infoModel2 = document.getElementById('eth-2')
    const infoModel3 = document.getElementById('bsc-1')
    if (infoModel3) {
      wrapper.removeChild(infoModel1)
      wrapper.removeChild(infoModel2)
    } else if (infoModel1) {
       wrapper.removeChild(infoModel3)
    }
  }


  const createEntity2 = (id, scale, position, model) => {
    // creamos la entidad
    const entity = document.createElement('a-entity')
    entity.setAttribute('id', id)
    entity.setAttribute('scale', scale)
    entity.setAttribute('position', position)
    entity.setAttribute('gltf-model', `#${model}`)

    // la metemos al html
    wrapper.appendChild(entity)
  }

  const showInfoModels = (data, netType) => {
    removeInfoModels()
    const dataObj = data.filter(obj => obj.net === netType)

    const question = dataObj.filter(element => element.model2)  // = true

    if (question) {
      dataObj.forEach((elemento) => {
        createEntity2(dataObj[0].model1.id, dataObj[0].model1.scale, dataObj[0].model1.position, dataObj[0].model1.model)
        createEntity2(dataObj[0].model2.id, dataObj[0].model2.scale, dataObj[0].model2.position, dataObj[0].model2.model)
      })
    } else {
      dataObj.forEach((elemento) => {
        createEntity2(dataObj[0].model1.id, dataObj[0].model1.scale, dataObj[0].model1.position, dataObj[0].model1.model)
      })
    }

  }

​

Answer 1

因此，只是基于您提供的代码，我不知道wrapper变量是在哪里声明的。

无论如何，您可能希望直接使用.remove()删除元素，而不是尝试从带有.removeChild()的父元素中删除它们。

所以从本质上说，你会有这样的东西：

infoModel1.remove();

在您希望经常删除的元素上直接调用.remove()比尝试从父元素中删除它容易得多。