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

Question

我试图用一个按钮删除由 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>

Answer 1

使用 setAttribute 放置类并使用 querySelector 或 getElementsByClassName，然后使用 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>