如果名稱較長，如何使可單擊按鈕保持在原位

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中，以使按鈕不會移動。