Add and Remove button JavaScript

Question

I need make button to add and remove that adds and removes inputs.

Did I write normal script or adding button should be another?

const add = document.getElementById("add");
var i = 0;
const div = document.getElementById("hobby");
add.addEventListener("click", function() {
  i++;
  const edit = document.createElement('input');
  edit.id = i;
  edit.placeholder = "More hobbies";
  //Also I need add remove button for each input, which removes its input
  div.appendChild(edit);
});

<div id="hobby">
  <input placeHolder="Type your hobby">
  <button>X</button>
  <!--Remove button-->
</div>
<button id="add">Add hobby</button>

Answer 1

I made some modifications to Anu's answer, but this should do the trick.

const add = document.getElementById("add");

var i = 0;
const div = document.getElementById("hobby");
add.addEventListener("click", function() {
  i++;
  const edit = document.createElement('input');
  edit.id = i;
  edit.placeholder = "More hobbies";

  var btn = document.createElement("BUTTON");
  var t = document.createTextNode("X");
  btn.id = i;
  btn.appendChild(t);


  btn.onclick = function() {
    $('#' + i).remove();
    $('#' + i).remove();
    i = i - 1;
  };
  //Also I need add remove button for each input, which removes its input
  div.appendChild(edit);
  div.appendChild(btn);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="hobby">
  <input placeHolder="Type your hobby">
  <button>X</button>
  <!--Remove button-->
</div>
<button id="add">Add hobby</button>

Answer 2

const addButton = document.getElementById("add");
const hobbyWrapper = document.getElementById("hobby");
let i = 0
addButton.addEventListener("click", add);

function add (){
 i = i + 1
 const inputWrapper = document.createElement('div');
 inputWrapper.id = `inputWrapper-${i}` ;
  const input = document.createElement('input');
  input.placeholder = "More hobbies";
  inputWrapper.appendChild(input)
  
  const removeButton = document.createElement('button');
  removeButton.innerHTML = 'X';
  removeButton.onclick = () => { 
   hobbyWrapper.removeChild(inputWrapper)
  }
  
  inputWrapper.appendChild(removeButton);
  hobbyWrapper.appendChild(inputWrapper);
}

<div id="hobby">
  <div id="inputWrapper">
    <input placeHolder="Type your hobby">
    <button>X</button>
  </div>
</div>
<button id="add">Add hobby</button>

Answer 3

var div = document.getElementById('hobby');

function addHobby() {
  var input = document.createElement('input'),
    button = document.createElement('button');
  
  input.placeholder = "More hobbies";
  button.innerHTML = 'X';
  // attach onlick event handler to remove button
  button.onclick = removeHobby;
  
  div.appendChild(input);
  div.appendChild(button);
}

function removeHobby() {
  // remove this button and its input
  div.removeChild(this.previousElementSibling);
  div.removeChild(this);
}

// attach onclick event handler to add button
document.getElementById('add').addEventListener('click', addHobby);
// attach onclick event handler to 1st remove button
document.getElementById('remove').addEventListener('click', removeHobby);

<div id="hobby">
  <input placeHolder="Type your hobby" />
  <button id="remove">X</button>
</div>
<button id="add">Add hobby</button>

Answer 4

To add button,

const add = document.getElementById("add");
var i = 0;
const div = document.getElementById("hobby");
add.addEventListener("click", function () {
    i++;
    const edit = document.createElement('input');
    edit.id = i;
    edit.placeholder = "More hobbies";

    var btn = document.createElement("BUTTON");
    btn.id = i;
    var t = document.createTextNode("X");
    btn.appendChild(t);

    //Also I need add remove button for each input, which removes its input
    div.appendChild(edit);
    div.appendChild(btn);

    btn.addEventListener("click", function () {
        div.removeChild(document.getElementById(btn.id));
        div.removeChild(btn);
    });
});

Answer 5

const add = document.getElementById("add");
var i = 0;
const div = document.getElementById("hobby");
add.addEventListener("click", function(){
  i++;
  const edit = document.createElement('input');
  edit.id = i;
  edit.placeholder = "More hobbies";
  
  //Also I need add remove button for each input, which removes its input
  div.appendChild(edit);
  
  var button = document. createElement("button");
  button. innerHTML = "X";
  button.id=i;
  button.onclick = function() { 
         div.removeChild(document.getElementById(button.id));
         div.removeChild(button)
 }
  div.appendChild(button);
  
 
});

<div id="hobby">
  <input placeHolder="Type your hobby">
  <button>X</button>
  <!--Remove button-->
</div>
<button id="add">Add hobby</button>

Answer 6

I think I see where you are going with this, add and remove hobbies.

Note for simplicity I wrap each group in a span, then add/remove that span.

I did NOT put a remove on the first one, you might do that IF you wanted to make it removable.

const addHobby = document.getElementById("add");
var i = 0;
const hobbydiv = document.getElementById("hobby");
addHobby.addEventListener("click", function() {
  i++;
  const newspan = document.createElement('span');
  newspan.className = "groupthing";
  const removeButton = document.createElement('button');
  removeButton.addEventListener('click', function(e) {
    e.target.closest(".groupthing").remove();
  });
  removeButton.className  = "deleteus";
  removeButton.innerHTML = "X";
  const editInput = document.createElement('input');
  editInput.id = i;
  editInput.placeholder = "More hobbies";
  newspan.appendChild(editInput);
  newspan.appendChild(removeButton);
  hobbydiv.appendChild(newspan);
});

.deleteus{color:red;}

<div id="hobby">
  <span class="groupthing">
  <input placeHolder="Type your hobby" />
  <button class="deleteus">X</button>
  </span>
  <!--Remove button-->
</div>
<button id="add">Add hobby</button>