html - how to add and delete values from array in javascript? -
on console should print div id of particular div created in form of array , each time div created value should stored in array , whenever div deleted value of corresponding div should removed array.
<!doctype html> <html> <head> </head> <body> <p>click button make division element.</p> <button id="button" onclick="myfunctiontry()">add</button> <div id="mydiv"> </div> <script> var counter=1; function myfunctiontry() { var x = document.createelement("div"); x.id="div" 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); var divnumber = counter; counter++; var arr=[]; arr.push(divnumber); console.log(arr); z.onclick = function remove(btn) { x.parentelement.removechild(x); var arr1=arr; console.log(arr1); } } </script> </body> </html>
how output as: [1] [1,2] [1,2,3]....... on running above mentioned code. m getn output [1] [2] [3]...... . how can done using javascript.
you need define array variable outside of function. see below code:
<!doctype html> <html> <head> </head> <body> <p>click button make division element.</p> <button id="button" onclick="myfunctiontry()">add</button> <div id="mydiv"> </div> <script> var counter = 1; var arr = []; function myfunctiontry() { var x = document.createelement("div"); x.id = "div" 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); var divnumber = counter; counter++; arr.push(divnumber); console.log(arr); z.onclick = function remove(btn) { x.parentelement.removechild(x); var arr1 = arr; console.log(arr1); } } </script> </body> </html>
Comments
Post a Comment