Question

我创建了几个按钮，其中一个被一个长命名按钮取代。基本上，当我单击Error in .oci.SendQuery(conn, statement, data = data, prefetch = prefetch, : ORA-14459: missing GLOBAL keyword按钮时，名为click me的按钮将被另一个名为banana的按钮替换。我遇到的问题是order apple, banana and orange按钮离开我在屏幕上的光标位置（在左侧）。即使点击了click me，我也希望click me按钮和apple按钮保持不变。请注意，在js方面，我需要从DOM中删除click me按钮以用于将来的样式。我该怎么做？

＆＃13;

banana

＆＃13;

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

＆＃13;

编辑：

我之所以提到remove（）只是因为我不想要style-display =＆＃34; none＆＃34;选项就可以了。

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中，以便按钮不会移动。

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

2 个答案: