Javascript 如何使用按钮删除document.createElement创建的div和输入

我试图用一个按钮删除document.createElement创建的div和输入。为此，我尝试为按钮分配一个函数，该函数将使用remove方法删除元素。我猜我没有使用正确的选择器或标记，也许这就是按钮无法删除元素的原因？我能做些什么来解决这个问题

//这是我使用的代码-

function myFunction() {
  var btn = document.createElement("div");

  btn.innerHTML = " Magic div";
  document.body.appendChild(btn);
}


function myFunction1() {
var newElement = document.createElement('input');

document.body.appendChild(newElement);
}

//这就是我尝试过的-

function myFunction5a() {
  var myobj1 = document.getElementById("div");
  myobj1.remove(btn);
}

function myFunction1a() {
  var myobj2 = document.getElementById("input");
  myobj2.remove();
}

//我用过这些按钮-

<button class="btn btn-success" onclick="myFunction()">Try it</button>
<button class="btn btn-danger" onclick="myFunction5a()">Remove it</button>
<button class="btn btn-primary" onclick="myFunction1()">Click me too</button>
<button class="btn btn-danger" onclick="myFunction1a()">Remove me too</button>

试试看
移除它
也点击我
把我也带走

使用setAttribute放置类，使用querySelector或GetElementsByCassName，然后使用remove

我只是在下面给出一个代码示例

function myFunction() {
  var btn = document.createElement("div");
btn.setAttribute("class", "magicDiv");   //use setAttribute to assign class

  btn.innerHTML = " Magic div";
  document.body.appendChild(btn);
}


function myFunction1() {
var newElement = document.createElement('input');
newElement.setAttribute("class", "inputItem");  //use setAttribute to assign class
document.body.appendChild(newElement);
}


function myFunction5a() {
  var myobj1 = document.getElementsByClassName("magicDiv"); //query selector can also be used
  myobj1.remove(btn);
}

function myFunction1a() {
  var myobj2 = document.getElementsByClassName("inputItem");  //query selector can also be used
  myobj2.remove();
}
//used these buttons-

<button class="btn btn-success" onclick="myFunction()">Try it</button>
<button class="btn btn-danger" onclick="myFunction5a()">Remove it</button>
<button class="btn btn-primary" onclick="myFunction1()">Click me too</button>
<button class="btn btn-danger" onclick="myFunction1a()">Remove me too</button>

函数myFunction（）{
var btn=document.createElement（“div”）；
btn.setAttribute（“class”，“magicDiv”）；//使用setAttribute分配类
btn.innerHTML=“Magic div”；
文件.正文.附件（btn）；
}
函数myFunction1（）{
var newElement=document.createElement（'input'）；
newElement.setAttribute（“类”、“输入项”）；//使用setAttribute分配类
document.body.appendChild（新元素）；
}
函数myFunction5a（）{
var myobj1=document.getElementsByClassName（“magicDiv”）；//也可以使用查询选择器
myobj1.移除（btn）；
}
函数myFunction1a（）{
var myobj2=document.getElementsByClassName（“inputItem”）；//也可以使用查询选择器
myobj2.remove（）；
}
//我用过这些按钮-
试试看
移除它
也点击我
把我也带走

您的按钮和div之间有什么关系？两者都被附加到身体上。它们相邻吗？如果是这样，您可以使用

nextElementSibling

@WaisKamal感谢您的评论，不，它们是分开的。在这种情况下可以做什么？在这种情况下，您需要跟踪它们，例如将它们存储在数组或类似的东西中。非常感谢，但是使用它们之后，我得到了这个错误测试。html:66未捕获引用错误：btn未在HtmlButtoneElement.onclick（test.html:27）的myFunction5a（test.html:66）中定义myFunction5a@test.html:66 onclick@test.html:27 test.html:71未捕获类型错误：myObj2.remove不是HTMLButtonElement.onclick（test.html:29）中myFunction1a（test.html:71）的函数