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

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

javascript

在javascript中访问动态创建的元素和id,javascript,Javascript,我正在学习javascript，并试图用纯javascript实现这一点我创建了一个输入，当用户填写并单击“添加输入文本”时，它会将文本包装成li标记，并在每个输入上添加关闭按钮，并将输入内容添加到其下的div，我使用以下代码我无法使每个列表项右侧的“关闭”按钮正常工作请帮忙。。谢谢 var-inputBox=document.getElementById（'input-box'）； var inputDisplay=document.getElementById（'input-disp

我正在学习javascript，并试图用纯javascript实现这一点

我创建了一个输入，当用户填写并单击“添加输入文本”时，它会将文本包装成li标记，并在每个输入上添加关闭按钮，并将输入内容添加到其下的div，我使用以下代码

我无法使每个列表项右侧的“关闭”按钮正常工作

请帮忙。。谢谢

var-inputBox=document.getElementById（'input-box'）；
var inputDisplay=document.getElementById（'input-display'）；
函数clickme（）{
如果（inputDisplay.value==“”）{
警告（“请在输入字段中输入内容。”）；
}否则
inputBox.innerHTML+=“”+inputDisplay.value+'”；
}
函数clearInput（）{
inputBox.innerHTML=“”；
}
函数delLast（）{
如果（inputBox.innerHTML==“”）{
警告（“无需删除的内容”）；
}否则{
var lastInputText=inputBox.lastChild；
lastInputText.remove（）；
}
}
var closeThis=document.getElementById（“closebtn”）；
关闭this.addEventListener（'click'，function（）{
this.parentNode.remove（）；
});
容器{最小高度：400px；宽度：100%；背景色：999；颜色：#fff；float:left}。输入容器{填充：10px；背景色：777；-moz边框半径：10px；-webkit边框半径：10px；边框半径：10px}a#closebtn{背景色：8B8B8B；float:right；填充：1px 3px；边距：0px；颜色：35fff；文本框装饰：无}输入类型{#输入框li{color:#FFF；背景色：#404040；填充：5px；宽度：300px；边距：0px；浮动：左；清除：两者；边距底部：10px；-moz边框半径：5px；-webkit边框半径：5px；边框半径：5px}

javascript学习
添加输入文本
清除输入框
德尔拉斯特


将closebtn
从id更改为类，因为id必须是唯一的
然后，您可以将关闭btn
单击处理程序替换为文档主体上的委托事件
document.body.addEventListener('click', function(event) {
  if(event.target.className==='closebtn') {
    event.target.parentNode.remove();
  }
});

事件。目标将是已单击的元素
片段

var-inputBox=document.getElementById（'input-box'）；
var inputDisplay=document.getElementById（'input-display'）；
函数clickme（）{
如果（inputDisplay.value==“”）{
警告（“请在输入字段中输入内容。”）；
}否则
inputBox.innerHTML+=“”+inputDisplay.value+'”；
}
函数clearInput（）{
inputBox.innerHTML=“”；
}
函数delLast（）{
如果（inputBox.innerHTML==“”）{
警告（“无需删除的内容”）；
}否则{
var lastInputText=inputBox.lastChild；
lastInputText.remove（）；
}
}
document.body.addEventListener（'click'，函数（事件）{
if（event.target.className==='closebtn'）{
event.target.parentNode.remove（）；
}
});
容器{最小高度：400px；宽度：100%；背景色：999；颜色：fff；浮点：左}。输入容器{填充：10px；背景色：777；-moz边框半径：10px；-webkit边框半径：10px；边框半径：10px}a.closebtn{背景色：8B8B8B；浮点：右；填充：1px 3px；边距：0px；颜色：fff；文本装饰：无}输入框类型：{#输入框li{color:#FFF；背景色：#404040；填充：5px；宽度：300px；边距：0px；浮动：左；清除：两者；边距底部：10px；-moz边框半径：5px；-webkit边框半径：5px；边框半径：5px}

javascript学习
添加输入文本
清除输入框
德尔拉斯特


创建关闭按钮后，需要添加单击处理程序

var-inputBox=document.getElementById（'input-box'）；
var inputDisplay=document.getElementById（'input-display'）；
函数clickme（）{
如果（inputDisplay.value==“”）{
警告（“请在输入字段中输入内容。”）；
}否则{
//创建一个新的li
var li=document.createElement（'li'）；
//将输入文本作为文本添加到其中
appendChild（document.createTextNode（inputDisplay.value））；
//创建一个新的锚
var a=document.createElement（'a'）；
a、 href=“#”；
//由于元素的id必须是唯一的，所以请使用classname
a、 className='closebtn'；
//添加单击处理程序
a、 addEventListener（'click'，closeHandler）；
//将锚添加到li
李.儿童（a）；
//将li添加到ul
inputBox.appendChild（li）；
}
}
函数closeHandler（）{
this.parentNode.remove（）；
}
函数clearInput（）{
inputBox.innerHTML=“”；
}
函数delLast（）{
如果（inputBox.innerHTML==“”）{
警告（“无需删除的内容”）；
}否则{
var lastInputText=inputBox.lastChild；
lastInputText.remove（）；
}
}
.container{
最小高度：400px；
宽度：100%；
背景色：#999；
颜色：#fff；
浮动：左
}
.输入容器{
填充：10px；
背景色：#777；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px
}
a、 关闭{
背景色：#8b；
浮动：对；
填充物：1px 3px；
边际：0px；
颜色：#fff；
文本装饰：无
}
#输入框{
列表样式类型：无
}
#输入框li{
颜色：#FFF；
背景色：#404040；
填充物：5px；
宽度：300px；
边际：0px；
浮动：左；
明确：两者皆有；
边缘底部：10px；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px
}

javascript学习
添加输入文本
清除输入框
德尔拉斯特


您需要在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学习
添加输入文本
清除输入框
德尔拉斯特