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

Question

我正在创建几个按钮，其中一个被一个长按钮取代。 基本上，当我单击“ click me按钮时，一个名为“ banana的按钮将替换为另一个名为“ order apple, banana and orange按钮。 我遇到的问题是“ click me按钮从屏幕上的光标位置移开（在左侧）。 我希望“ click me按钮和“ apple按钮即使在单击“ click me之后仍保持在原位。 请注意，在JS端，我需要从DOM上删除banana按钮，以备将来使用。 我该怎么办？

 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; } 

编辑：

我之所以提到remove（）只是因为我不想在其上使用style-display =“ none”选项。

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

我认为您正在尝试在buttonThree上使用jQuery .remove（）。 在javaScript中，您可以使用如下代码：

allDivsButton.removeChild(buttonThree);

您还需要查看CSS。 .allbuttons类具有text-align属性：center; 这导致了导致按钮“移动”的行为。 您可以将按钮包装在具有特定宽度的附加div中，以使按钮不会移动。