CODEWITHSUNDEEP
javascript
justincarb
justincarb

Reputation: 49

Accessing Dynamically created elements and id in javascript

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>

Upvotes: 1

Views: 138

Answers (3)

Sekretoz
Sekretoz

Reputation: 112

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.

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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>

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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>

Upvotes: 1

Related Questions