添加和删​​除按钮 JavaScript [重复]

Question

我需要制作按钮来添加和删除添加和删除输入。

我写的是普通脚本还是添加按钮应该是另一个？

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

我对 Anu 的回答做了一些修改，但这应该可以解决问题。

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

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 5

我想我知道你在做什么，添加和删除爱好。

注意为简单起见，我将每个组包装在一个跨度中，然后添加/删除该跨度。

我没有对第一个进行删除，如果您想将其删除，可以这样做。

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>

Answer 6

要添加按钮，

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);
    });
});