stackoom
  简体   繁体   中英

Accessing Dynamically created elements and id in javascript

 原文  2015-06-10 00:57:39  8   3    javascript

Question

I am learning javascript and trying to do this with pure javascript..

I have created an input which when user fill and click on "Add Input Text" it will wrap the text into li tags and also add close button on the each input and add the input content to the div under it, I am using following code..

I am unable to make the close button work which are on the right side of each list items...

Please help.. Thanks 

 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(); }); 
 .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>

3 answers

solution1
 2  2015-06-10 01:26:59

you need to add a onclick event on your x link and pass the element as parameter 

<!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>

i added close_click function in javascript that is being called in every of your created close button.

solution2
 1  2015-06-10 01:15:14

Change closebtn from an id to a class, because ids must be unique.

You can then replace the closebtn click handler with a delegated event on document.body : 

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

event.target will be the element that has been clicked.

Snippet 

 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>

solution3
 0  2015-06-10 01:21:25

You need to add the click handler after creating the close button 

 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(); } } 
 .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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Accessing elements inside dynamically created divs with HTML/Javascript dynamically created id in javascript how to assign unique id to elements that are created dynamically - Javascript How to select dynamically created elements using id or class in javascript? Accessing a dynamically created link with Javascript Get the id of elements dynamically created Accessing a dynamically created set of elements in react Select dynamically created elements in javascript Detect dynamically created elements in JavaScript JavaScript Changing dynamically created elements
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM