如果名称较长，如何使可单击按钮保持在原位

Question

I'm creating few buttons, and one of them gets replaced by a long named button. Basically when I click click me button, a button named banana , gets replaced by another button named order apple, banana and orange . The problem I'm running into is click me button moves away from my cursor position on the screen(on to the left side). I want the click me button and apple button to stay in place even after clicking click me . Note that, on js side, I need to remove banana button off the DOM for future styling purposes. How do I go about this?

 var allDivsButton = document.createElement("div"); allDivsButton.setAttribute("class", "allbuttons"); var buttonOne = document.createElement("button"); buttonOne.setAttribute("type", "button submit"); buttonOne.setAttribute("class", "buttons"); buttonOne.innerHTML = "click me" allDivsButton.appendChild(buttonOne) var buttonTwo = document.createElement("button"); buttonTwo.setAttribute("type", "button"); buttonTwo.setAttribute("class", "buttons"); allDivsButton.appendChild(buttonTwo); buttonTwo.innerHTML = "apple" var buttonThree = document.createElement("button"); buttonThree.setAttribute("type", "button"); buttonThree.setAttribute("class", "buttons"); allDivsButton.appendChild(buttonThree); buttonThree.innerHTML = "banana" var buttonFour = document.createElement("button"); buttonFour.setAttribute("type", "button"); buttonFour.setAttribute("class", "buttons"); buttonFour.setAttribute("id", "button4"); buttonFour.innerHTML = " order apple, banana and orange " document.body.appendChild(allDivsButton); buttonOne.addEventListener('click', function(){ buttonThree.remove(); allDivsButton.appendChild(buttonFour); }) 

 .allbuttons{ background-color: red; width: 100%; height: 50px; text-align: center; } .buttons{ padding: 10px; margin: 10px; } 

edit:

I mentioned remove() only because I don't want style-display = "none" option on it.

Answer 1

 var allDivsButton = document.createElement("div"); allDivsButton.setAttribute("class", "allbuttons"); var buttonOne = document.createElement("button"); buttonOne.setAttribute("type", "button submit"); buttonOne.setAttribute("class", "buttons"); buttonOne.innerHTML = "click me" allDivsButton.appendChild(buttonOne) var buttonTwo = document.createElement("button"); buttonTwo.setAttribute("type", "button"); buttonTwo.setAttribute("class", "buttons"); allDivsButton.appendChild(buttonTwo); buttonTwo.innerHTML = "apple" var buttonThree = document.createElement("button"); buttonThree.setAttribute("type", "button"); buttonThree.setAttribute("class", "buttons"); allDivsButton.appendChild(buttonThree); buttonThree.innerHTML = "banana" var buttonFour = document.createElement("button"); buttonFour.setAttribute("type", "button"); buttonFour.setAttribute("class", "buttons"); buttonFour.setAttribute("id", "button4"); buttonFour.innerHTML = " order apple, banana and orange " document.body.appendChild(allDivsButton); buttonOne.addEventListener('click', function(){ buttonThree.remove(); allDivsButton.appendChild(buttonFour); }); var cloneall = allDivsButton.cloneNode(true); document.body.appendChild(cloneall); cloneall.setAttribute("class", "allbuttonsclone"); var clonebutton = buttonFour.cloneNode(true); clonebutton.setAttribute("class", "buttons buttonclone hidden"); cloneall.appendChild(clonebutton); cloneall.children[0].addEventListener('click', function(){ cloneall.children[2].setAttribute("class", "buttons hidden"); clonebutton.setAttribute("class", "buttons buttonclone"); }); 

 .allbuttons { background-color: red; width: 100%; height: 50px; text-align: left; } .allbuttonsclone { background-color: orange; width: 100%; height: 50px; text-align: center; } .buttons { padding: 10px; margin: 10px; } .buttonclone { position: absolute; width: 220px; top: 58px; left: 50%; margin-left: 50px; } .hidden { opacity: 0; pointer-events: none; } 

Answer 2

I think you are trying to use the jQuery .remove() on buttonThree. In javaScript you could use something like:

allDivsButton.removeChild(buttonThree);

You also need to look at the css. The class .allbuttons has the attribute of text-align: center; which is causing the behavior that is causing the buttons to 'move'. You could have the buttons wrapped in an additional div that has a specific width so the buttons don't move.