Question

我正在使用JavaScript执行待办事项列表。我想使用按钮删除div，该按钮是使用JavaScript动态创建的。。我已经为该按钮分配了 id ，但我不知道如何访问它。有人可以帮忙吗？我的代码如下： -

var Addnew = document.querySelector('#add_new');
var myDiv;
var button;

function newDiv() {
    var body = document.getElementsByTagName('body')[0];
    myDiv = document.createElement('div');
    var userEntry = document.querySelector('.newIn').value;
    button = document.createElement('button');
    myDiv.className = 'item';
    myDiv.style.display = 'block';
    myDiv.innerHTML = userEntry;
    button.style.display = 'block';
    button.innerHTML = "Remove";
    button.setAttribute('id','Remove');
    button.style.marginLeft = '280px';
    button.style.background = 'tomato';
    button.style.color = 'white';
    myDiv.appendChild(button);
    body.appendChild(myDiv);
}
document.getElementById('Remove').addEventListener('click', function() {
    console.log('done');
});

Addnew.addEventListener('click', function() {
    newDiv();
});
document.querySelector('.newIn').addEventListener('keydown', function(e) {
    if (e.which == 13) {
        newDiv();
    }
});

.input_box{
  text-align: center;
  margin-top: 7%;
}
.input_box > input {
  width:250px;
}
#add_new{
  background-color:rgb(44, 147, 124);
  color:white;
  width:70px;
  margin-left:5px;
}
h1{
  text-align: center;
  font-family:sans-serif;;
}
.item{
  width:270px;
  height:35px;
  margin-top: 20px;
  margin-left:38%;
  display: none;
  border: 0.5px ridge green;
}
#Remove {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To-do List</title>
    <!-- Css linking -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>To-do list</h1>
    <div class="input_box">
      <input type="text" class="newIn" placeholder="What do you want to add?" autofocus="autofocus"/>
      <button id="add_new">Add</button>
    </div>
    <div class="item"></div> <button id="Remove"></button>
    <script src="main.js" charset="utf-8"></script>
  </body>
</html>

Answer 1

var Addnew = document.querySelector('#add_new');
var myDiv;
var button;

function newDiv() {
    var body = document.getElementsByTagName('body')[0];
    myDiv = document.createElement('div');
    var userEntry = document.querySelector('.newIn').value;
    button = document.createElement('button');
    myDiv.className = 'item';
    myDiv.style.display = 'block';
    myDiv.innerHTML = userEntry;
    button.style.display = 'block';
    button.innerHTML = "Remove";
    button.setAttribute('id','Remove');
    button.style.marginLeft = '280px';
    button.style.background = 'tomato';
    button.style.color = 'white';
    myDiv.appendChild(button);
    body.appendChild(myDiv);
    button.addEventListener('click', function() {
    console.log('done');
   });

}


Addnew.addEventListener('click', function() {
    newDiv();
});
document.querySelector('.newIn').addEventListener('keydown', function(e) {
    if (e.which == 13) {
        newDiv();
    }
});

.input_box{
  text-align: center;
  margin-top: 7%;
}
.input_box > input {
  width:250px;
}
#add_new{
  background-color:rgb(44, 147, 124);
  color:white;
  width:70px;
  margin-left:5px;
}
h1{
  text-align: center;
  font-family:sans-serif;;
}
.item{
  width:270px;
  height:35px;
  margin-top: 20px;
  margin-left:38%;
  display: none;
  border: 0.5px ridge green;
}
#Remove {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To-do List</title>
    <!-- Css linking -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>To-do list</h1>
    <div class="input_box">
      <input type="text" class="newIn" placeholder="What do you want to add?" autofocus="autofocus"/>
      <button id="add_new">Add</button>
    </div>
    <div class="item"></div> <button id="Remove"></button>
    <script src="main.js" charset="utf-8"></script>
  </body>
</html>

var Addnew = document.querySelector('#add_new');
var myDiv;
var button;

function newDiv() {
    var body = document.getElementsByTagName('body')[0];
    myDiv = document.createElement('div');
    var userEntry = document.querySelector('.newIn').value;
    button = document.createElement('button');
    myDiv.className = 'item';
    myDiv.style.display = 'block';
    myDiv.innerHTML = userEntry;
    button.style.display = 'block';
    button.innerHTML = "Remove";
    button.setAttribute('id','Remove');
    button.style.marginLeft = '280px';
    button.style.background = 'tomato';
    button.style.color = 'white';
    myDiv.appendChild(button);
    body.appendChild(myDiv);
}
document.getElementById('Remove').addEventListener('click', function() {
    console.log('done');
});

Addnew.addEventListener('click', function() {
    newDiv();
});
document.querySelector('.newIn').addEventListener('keydown', function(e) {
    if (e.which == 13) {
        newDiv();
    }
});

.input_box{
  text-align: center;
  margin-top: 7%;
}
.input_box > input {
  width:250px;
}
#add_new{
  background-color:rgb(44, 147, 124);
  color:white;
  width:70px;
  margin-left:5px;
}
h1{
  text-align: center;
  font-family:sans-serif;;
}
.item{
  width:270px;
  height:35px;
  margin-top: 20px;
  margin-left:38%;
  display: none;
  border: 0.5px ridge green;
}
#Remove {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To-do List</title>
    <!-- Css linking -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>To-do list</h1>
    <div class="input_box">
      <input type="text" class="newIn" placeholder="What do you want to add?" autofocus="autofocus"/>
      <button id="add_new">Add</button>
    </div>
    <div class="item"></div> <button id="Remove"></button>
    <script src="main.js" charset="utf-8"></script>
  </body>
</html>

使用动态创建的按钮删除div

1 个答案: