Question

我有一个按钮，当单击该按钮时，它会调用函数show（）。

此功能通过关闭按钮动态创建DIV！

此关闭按钮应调用一个函数，以从DOM中删除创建的DIV。

考虑到仅在这种情况下才需要第二个功能，我可以这样做而不必显式声明该功能吗？

这是一个演示：

更清楚的是，这种想法是无需声明“ close（）”函数，而仅使用原始JS在“ show（）”函数中设置此功能。

function show() {
	var div = document.createElement('div');
  div.setAttribute("id", "myDiv");
  div.innerHTML = "Hello World ";
  var button = document.createElement('button');
  button.innerHTML = "CLOSE";
  button.setAttribute("onclick","close();");
  div.appendChild(button);
  document.body.appendChild(div);
}

function close() {
  //code to remove element
}

#myDiv {
  background:yellow;
  border:1px solid black;
  margin-top:10px;
  padding:20px;
}

<button onclick="show();">
  Show
</button>

JSFIDDLE： https://jsfiddle.net/do4yq2w9/1/

Answer 1

您可以为按钮的onclick分配以下新功能：

function show() {
	var div = document.createElement('div');
  div.setAttribute("id", "myDiv");
  div.innerHTML = "Hello World ";
  var button = document.createElement('button');
  button.innerHTML = "CLOSE";
  button.onclick = function() {
  	document.getElementById('myDiv').remove();
  }
  div.appendChild(button);
  document.body.appendChild(div);
}

#myDiv {
  background:yellow;
  border:1px solid black;
  margin-top:10px;
  padding:20px;
}

<button onclick="show();">
  Show
</button>

与动态创建的元素相关的Onclick函数

1 个答案: