Cuando trato de eliminar el elemento haciendo clic en ellos. Sufrí algunos problemas.

Cuando creo un elemento y agrego esto al elemento, el elemento anterior no se eliminó.

Mi resultado deseado es reemplazarlos por un botón nuevo.

¿Cómo puedo lograrlo? Si tiene alguna opinión, hágamelo saber.

Gracias

document.getElementById("btn").addEventListener("click",function(){
  
      let btn = document.getElementById("btn");
      let button = document.createElement("button");
      button.textContent = 'retry';
      button.className = 'retry';
      
      btn.appendChild(button);

})
<div id="btn"><button>test</button></div>
2
Heisenberg 15 may. 2020 a las 16:31

4 respuestas

La mejor respuesta

Utilice el Node.replaceChild():

document.getElementById("btn").addEventListener("click",function(){
  let btn = document.getElementById("btn");
  let button = document.createElement("button");
  button.textContent = 'retry';
  button.className = 'retry';

  btn.parentNode.replaceChild(button, btn);
})
<div id="btn"><button>test</button></div>
1
sdgluck 15 may. 2020 a las 13:34

No tiene que reemplazar el botón por completo, solo puede actualizar sus propiedades, como se muestra a continuación.

document.getElementById('btn').addEventListener('click', function(e) {
    e.target.innerHTML = 'retry';
    e.target.className = 'retry';
});
<div id="btn"><button>test</button></div>
1
Ghassen Louhaichi 15 may. 2020 a las 13:38
document.getElementById("btn").addEventListener("click",function(){
      let btn = document.getElementById("btn");
      let button = document.createElement("button");
      button.textContent = 'retry';
      button.className = 'retry';
      
      btn.replaceWith(button);

})
<div id="btn"><button>test</button></div>
0
Vaibhav 15 may. 2020 a las 13:39
document.getElementById("btn").addEventListener("click",function(){
      let btn = document.getElementById("btn");
      let button = document.createElement("button");
      button.textContent = 'retry';
      button.className = 'retry';
      btn.removeChild(btn.childNodes[0]); //add this
      btn.appendChild(button);
})
<div id="btn"><button>test</button></div>
0
Majed Badawi 15 may. 2020 a las 13:35