JavaScript Paquete类删除已渲染DOM内容功能实现问题咨询

你的eliminarContenido方法失效核心有两个问题：

• 实例没有存储自身渲染的DOM节点引用：mostrar和mostrarDisculpa方法里创建的cuadros、disculpa都是局部变量，方法执行结束后实例无法获取到这些已经插入到页面的DOM元素，自然无法删除
• 原eliminarContenido方法中使用的span、this.disculpa都是未定义变量，执行会直接报错

修改方案 #

第一步：改造Paquete类，存储DOM引用、重写删除方法 #

class Paquete {
    constructor(montoCredito, plazosCredito, cuotaTotal, tasasCredito) {
        this.monto = parseFloat(montoCredito);
        this.plazos = plazosCredito;
        this.cuota = parseFloat(cuotaTotal);
        this.tasas = tasasCredito;
        // 新增属性：存储当前实例渲染的DOM节点
        this.elementoRenderizado = null;
    }
    
    mostrar() {
        let cuadros = document.createElement("article")
        cuadros.innerHTML = `<h3>Paquete Crediticio</h3>
                            <p>Prestamo de hasta: ${this.monto} pesos</p>
                            <p>Que puede ser devuelto en: ${this.plazos}</p>
                            <p>Con tasas del: ${this.tasas}</p>
                            <p>Con una cuota de: ${this.cuota} pesos</p>
                            <p>El valor mostrado como cuota es referencial al monto maximo mostrado</p>
                            <button> Me interesa!</button>`                                                 
        // 把创建的节点存到实例属性上
        this.elementoRenderizado = cuadros;
        document.getElementById("prestamos").appendChild(cuadros)
    }
    mostrarDisculpa() {
        let disculpa = document.createElement("span");
        disculpa.innerHTML = `<h3>Disculpanos</h3>
                              <p>En este momento no tenemos una propuesta para vos</p>`;
        // 把道歉节点存到实例属性上
        this.elementoRenderizado = disculpa;
        document.getElementById("prestamos").appendChild(disculpa);
    }
    eliminarContenido(){
        // 判断当前实例有没有渲染过节点，且节点还在DOM树里
        if(this.elementoRenderizado && this.elementoRenderizado.parentNode) {
            this.elementoRenderizado.parentNode.removeChild(this.elementoRenderizado);
            // 删除后清空引用
            this.elementoRenderizado = null;
        }
    }
}

第二步：优化重置按钮逻辑（可选） #

你现在的重置逻辑是循环所有实例调用删除方法，已经可以正常运行。如果追求更简洁的写法，也可以直接清空整个容器内容，不用逐个调用实例方法：

buttonReset.addEventListener("click", (e) => {
    e.preventDefault()
    document.getElementById("prestamos").innerHTML = '';
})

内容的提问来源于stack exchange，提问作者user16754567