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

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 stackoverflow.com/help/how-to-ask — Doomenik
– Doomenik, Commented Jul 20, 2017 at 11:51
what did you try? did you search on the web? i'm sure this was answered dozens on times — Kaddath
– Kaddath, Commented Jul 20, 2017 at 11:51
have you tired something and failed? if yes, put in the code please... — Prashanth Benny
– Prashanth Benny, Commented Jul 20, 2017 at 11:54
Sounds like a shopping list: AngularJS: w3schools.com/angular/angular_application.asp — Nick is tired
– Nick is tired, Commented Jul 20, 2017 at 11:59

Bhargav Chudasama · Accepted Answer · 2017-07-20 12:06:03Z

5

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>

edited Jul 20, 2017 at 12:06

Bhargav Chudasama

7,2256 gold badges24 silver badges41 bronze badges

answered Jul 20, 2017 at 12:01

David Somekh

9634 gold badges14 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maggie Over a year ago

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.

Bhargav Chudasama · Accepted Answer · 2017-07-21 07:47:09Z

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, 2017 at 7:47

answered Jul 20, 2017 at 12:04

Bhargav Chudasama

7,2256 gold badges24 silver badges41 bronze badges

9 Comments

maggie Over a year ago

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.

Bhargav Chudasama Over a year ago

i have updated my answer now div generated with unique id check it @maggie

maggie Over a year ago

It would have been better if this answer is provided in javascript as i dnt know jquery :)

Bhargav Chudasama Over a year ago

now all div created with unique id and using javascript @maggie

maggie Over a year ago

But now your closeDiv method is not working . I think you forgot to edit it into javascript. it's still in jQuery.

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Linked

Related