adding and deleting div dynamically on click on x button inside a div using javascript

Question

On clicking on add button in html page a div should be displayed on html page and multiple div should be shown on multiple clicks. Each div should have X icon and on clicking x, div should disappear from UI. Also it should maintain an array of id's of the dynamically generated div elements which should be shown on console and that id should be deleted whenever that particular div is removed.

This code is working fine but instead of using counter can i use array in which dynamically id will be generated whenever the div is created and id should be removed when div is deleted.?

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>Click the button to make a Division element.</p>

<button id="button" onclick="myFunctionAdd()">Add</button>

<div id="myDIV">
</div>

<script>

 var counter=1;
function myFunctionAdd() 
    {

    var x = document.createElement("DIV");
    x.id="div"

    var divNumber = counter;
    counter++;
    console.log("Div Number: "+ divNumber + " is created");

    var z= document.createElement("button");
    z.id="btn";
    x.setAttribute("style", "border :1px solid;height: 250px; width: 250px; top: 741px; left: 491px; padding:10px; margin: 50px;");
    z.setAttribute("style", "background: #000 url(/home/subodh/Desktop/Widget/icon_incorrect.svg) no-repeat 0px 0px; height: 30px; width:40px; top: 6px; left: 4px; float: right; margin: 0px; padding:0px; clear: both; float:right;");


    x.appendChild(z);
    document.body.appendChild(x).appendChild(z);

    z.onclick = function remove(btn) 
    {

    console.log("Div Number: "+ divNumber + " is deleted");
    x.parentElement.removeChild(x);
    }

   }


</script>

</body>
</html>

Please read this and aks again https://stackoverflow.com/help/how-to-ask — Doomenik, Jul 20 '17 at 11:51
what did you try? did you search on the web? i'm sure this was answered dozens on times — Kaddath, Jul 20 '17 at 11:51
have you tired something and failed? if yes, put in the code please... — Prashanth Benny, Jul 20 '17 at 11:54
Sounds like a shopping list: AngularJS: https://www.w3schools.com/angular/angular_application.asp — Nick is tired, Jul 20 '17 at 11:59

score 5 · Accepted Answer · edited Jul 20 '17 at 12:06

See this example: https://codepen.io/dsomekh/pen/GEVNWb

function Clone() {


  var clone = document.getElementById('thediv').cloneNode(true); // "deep" clone
  document.getElementById("container").appendChild(clone);
}

function Delete(button) {
  var parent = button.parentNode;
  var grand_father = parent.parentNode;
  grand_father.removeChild(parent);
}

.mydiv {
  border: 2px solid red;
}

<div class="container" id="container">
  <div class="mydiv" id="thediv">
    I am the div
    <button type="button" onclick="Clone()" ) ">Clone</button>
      <button type="button " onclick="Delete(this) ")">Delete</button>
  </div>
  <div>

Also in this code i want to show unique id of each div in console whenever they are created and that id should be removed whenever that particular div is removed. — maggie, Jul 21 '17 at 05:08

Bhargav Chudasama · Answer 2 · 2017-07-21T07:47:09.390

1

try this one

function adddiv() {
  document.body.innerHTML += '<div id=' + Math.random() + '><button id="btn" onclick=closediv(this)>X</button>' + Math.random() + '</div>';
}

function closediv(e) {
  var par = $(event.target).parent();
  par.remove();
}

div {
  border: solid 1px red;
  width: 150px;
  height: 100px;
  margin: 2px;
}

#btn {
  clear: both;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add" onclick=adddiv()>Add</button>

now all div created with unique id and using javascript

edited Jul 21 '17 at 07:47

answered Jul 20 '17 at 12:04

Bhargav Chudasama

6,928
5
21
39

Also in this code i want to show unique id of each div in console whenever they are created and that id should be removed whenever that particular div is removed. – maggie Jul 21 '17 at 05:08
i have updated my answer now div generated with unique id check it @maggie – Bhargav Chudasama Jul 21 '17 at 07:09
It would have been better if this answer is provided in javascript as i dnt know jquery :) – maggie Jul 21 '17 at 07:31
now all div created with unique id and using javascript @maggie – Bhargav Chudasama Jul 21 '17 at 07:47
But now your closeDiv method is not working . I think you forgot to edit it into javascript. it's still in jQuery. – maggie Jul 21 '17 at 09:07
bro its properly work you check properly @maggie – Bhargav Chudasama Jul 21 '17 at 09:14
No it's not. when i am clicking on "x" sign the div is not getn deleted – maggie Jul 21 '17 at 09:16
you run code snippet bro – Bhargav Chudasama Jul 21 '17 at 09:19
It's giving this error in console :- ReferenceError: event is not defined – maggie Jul 21 '17 at 09:42

adding and deleting div dynamically on click on x button inside a div using javascript

2 Answers2