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

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -