How to replace button by clicking in Javascript

Question

When I try to remove element by clicking them. I suffered some trouble.

When I create element and append this to element,previous element was not removed.

My desired result is to replace them to new button.

How can I achieve it? If you have opinion,please let me know.

thanks

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>

sdgluck · Accepted Answer · 2020-05-15 13:34:39Z

1

Use the Node.replaceChild() method:

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>

answered May 15, 2020 at 13:34

sdgluck

27.8k12 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

M0nst3R · Accepted Answer · 2020-05-15 13:38:07Z

1

You don't have to replace the button entirely, you can just update its properties, as shown below.

document.getElementById('btn').addEventListener('click', function(e) {
    e.target.innerHTML = 'retry';
    e.target.className = 'retry';
});

<div id="btn"><button>test</button></div>

answered May 15, 2020 at 13:38

M0nst3R

5,3131 gold badge28 silver badges39 bronze badges

Comments

Vaibhav · Accepted Answer · 2020-05-15 13:39:24Z

0

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>

answered May 15, 2020 at 13:39

Vaibhav

1,4981 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to replace button by clicking in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related