Jai Fiz Jai Fiz - 1 month ago 9
HTML Question

Adding and removing buttons

I am currently developing a simple webpage for a school assignment and I was wondering it is possible to create a button that will add a button, also a button beside it to remove the button?

Basically a button called "Add Button" where if you click on it, a button with the same size(can be named anything appropriate with no functions required). no matter how many times I click it, more buttons will be added e.g. button1, button2, button3 etc. Also, next to "Add Button" button is a button called "Remove Button" where it removes the buttons desendingly e.g. from button3, button2, then button1

Answer Source

How about something like this? Change the increment slightly.

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
   button{
     height:100px;
     width: 80px;
     text-align: center;
     margin: 5px 4px;
   }
  #mainButtons button{
    display: inline-block;
    margin: auto;
    }
   </style>


<div id="mainButtons">
 <button onclick="addButton()">Make Button</button>
 <button onclick="removeButton()">Remove Button</button>
</div>
</br>
<div id="que"></div>

<script>
var increment = 0;
function addButton(){
 $("#que").append($("<button id='btn"+(increment++)+"'>This is Button"+ (increment)+"</button>"));
}

function removeButton(){
  $("#btn"+(increment-1)).remove();
  increment--;
}
</script>