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>
     width: 80px;
     text-align: center;
     margin: 5px 4px;
  #mainButtons button{
    display: inline-block;
    margin: auto;

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

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

function removeButton(){