Question

我正在学习javascript并尝试使用纯javascript进行此操作..

我创建了一个输入，当用户填写并点击＆＃34;添加输入文本＆＃34;它将文本包装成li标签，并在每个输入上添加关闭按钮，并将输入内容添加到其下的div，我使用以下代码..

我无法使每个列表项右侧的关闭按钮工作...

请帮忙..谢谢

＆＃13;

var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');


function clickme(){
  if(inputDisplay.value == ""){
    alert("please put something in the input field.");
  }else
    inputBox.innerHTML += "<li>" + inputDisplay.value + '<a href="#" id="closebtn">x</a></li>';
}

function clearInput(){

    inputBox.innerHTML = "";
}

function delLast(){
    if( inputBox.innerHTML === "") {
     alert("There is nothing to delete");

    }else{
    var lastInputText = inputBox.lastChild;
    lastInputText.remove();
    }

}

var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
  this.parentNode.remove();
});

＆＃13;

.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a#closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>javascript-learning</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <div class="container">
    <div class="input-container">
    <input type="text" id="input-display">
    <button onclick = "clickme()">Add input text</button>
  <button onclick= "clearInput()">clear Input Box</button>
  <button onclick= "delLast()">Del Last</button>
  </div> <!--input-container -->
    <div id ="main-content-container">
        <ul id= "input-box">

        </ul>
    </div> <!--input-box -->
    <div class="array-div">
        
    </div>
  </div> <!-- container -->
  <!-- javascripts -->
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/underscore/underscore.min.js"></script>
  <script src="bower_components/backbone/backbone-min"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

＆＃13;

Answer 1

您需要在x链接上添加onclick事件并将该元素作为参数传递

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>javascript-learning</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <div class="container">
    <div class="input-container">
    <input type="text" id="input-display">
    <button onclick = "clickme()">Add input text</button>
  <button onclick= "clearInput()">clear Input Box</button>
  <button onclick= "delLast()">Del Last</button>
  </div> <!--input-container -->
    <div id ="main-content-container">
        <ul id= "input-box">

        </ul>
    </div> <!--input-box -->
    <div class="array-div">

    </div>
  </div> <!-- container -->
  <!-- javascripts -->
 <script>

 var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');


function clickme(){
  if(inputDisplay.value == ""){
    alert("please put something in the input field.");
  }else
    inputBox.innerHTML += "<li>" + inputDisplay.value + '<a href="#" onclick="close_click(this)" id="closebtn">x</a></li>';
}

function clearInput(){

    inputBox.innerHTML = "";
}

function delLast(){
    if( inputBox.innerHTML === "") {
     alert("There is nothing to delete");

    }else{
    var lastInputText = inputBox.lastChild;
    lastInputText.remove();
    }

}

var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
  this.parentNode.remove();
});

function close_click(elem)
{
elem.parentNode.remove();
}

 </script>
</body>
</html>

我在每个创建的关闭按钮中调用的javascript中添加了close_click函数。

Answer 2

将closebtn从ID更改为类，因为ID必须是唯一的。

然后，您可以使用closebtn上的委派活动替换document.body点击处理程序：

document.body.addEventListener('click', function(event) {
  if(event.target.className==='closebtn') {
    event.target.parentNode.remove();
  }
});

event.target将是已点击的元素。

<强>段

var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');


function clickme(){
  if(inputDisplay.value == ""){
    alert("please put something in the input field.");
  }else
    inputBox.innerHTML += "<li>" + inputDisplay.value + '<a href="#" class="closebtn">x</a></li>';
}

function clearInput(){

    inputBox.innerHTML = "";
}

function delLast(){
    if( inputBox.innerHTML === "") {
     alert("There is nothing to delete");

    }else{
    var lastInputText = inputBox.lastChild;
    lastInputText.remove();
    }

}

document.body.addEventListener('click', function(event) {
  if(event.target.className==='closebtn') {
    event.target.parentNode.remove();
  }
});

.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a.closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>javascript-learning</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <div class="container">
    <div class="input-container">
    <input type="text" id="input-display">
    <button onclick = "clickme()">Add input text</button>
  <button onclick= "clearInput()">clear Input Box</button>
  <button onclick= "delLast()">Del Last</button>
  </div> <!--input-container -->
    <div id ="main-content-container">
        <ul id= "input-box">

        </ul>
    </div> <!--input-box -->
    <div class="array-div">
        
    </div>
  </div> <!-- container -->
  <!-- javascripts -->
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/underscore/underscore.min.js"></script>
  <script src="bower_components/backbone/backbone-min"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

Answer 3

您需要在创建关闭按钮后添加点击处理程序

＆＃13;

var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');


function clickme() {
  if (inputDisplay.value == "") {
    alert("please put something in the input field.");
  } else {
    //create a new li
    var li = document.createElement('li');
    //add the input text to it as text
    li.appendChild(document.createTextNode(inputDisplay.value));
    //create a new anchor
    var a = document.createElement('a');
    a.href = "#";
    //since id of an element must be unique, use classname
    a.className = 'closebtn';
    //add the click handler
    a.addEventListener('click', closeHandler);
    //add the anchor to li
    li.appendChild(a);
    //add the li to the ul
    inputBox.appendChild(li);
  }
}

function closeHandler() {
  this.parentNode.remove();
}

function clearInput() {

  inputBox.innerHTML = "";
}

function delLast() {
  if (inputBox.innerHTML === "") {
    alert("There is nothing to delete");

  } else {
    var lastInputText = inputBox.lastChild;
    lastInputText.remove();
  }

}

＆＃13;

.container {
  min-height: 400px;
  width: 100%;
  background-color: #999;
  color: #fff;
  float: left
}
.input-container {
  padding: 10px;
  background-color: #777;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px
}
a.closebtn {
  background-color: #8B8B8B;
  float: right;
  padding: 1px 3px;
  margin: 0px;
  color: #fff;
  text-decoration: none
}
#input-box {
  list-style-type: none
}
#input-box li {
  color: #FFF;
  background-color: #404040;
  padding: 5px;
  width: 300px;
  margin: 0px;
  float: left;
  clear: both;
  margin-bottom: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>javascript-learning</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
  <div class="container">
    <div class="input-container">
      <input type="text" id="input-display">
      <button onclick="clickme()">Add input text</button>
      <button onclick="clearInput()">clear Input Box</button>
      <button onclick="delLast()">Del Last</button>
    </div>
    <!--input-container -->
    <div id="main-content-container">
      <ul id="input-box">

      </ul>
    </div>
    <!--input-box -->
    <div class="array-div">

    </div>
  </div>
  <!-- container -->
  <!-- javascripts -->
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/underscore/underscore.min.js"></script>
  <script src="bower_components/backbone/backbone-min"></script>
  <script src="assets/js/script.js"></script>
</body>

</html>

＆＃13;

在javascript中访问动态创建的元素和id

3 个答案: