删除创建的div js

Question

请告诉我，有代码，当你点击选择选项时，会添加一个div。请帮我在每个创建的div旁边添加一个删除按钮并删除这个div。

var p = document.getElementById("inputi");
var length = 1;

function add_input_from_select(select) {
  var new_input = document.createElement("input");
  new_input.name = "my_input";
  new_input.value = select.value;
  var div = document.createElement('div');
  div.innerHTML = '<br>div элемент №' + length + '<br>';
  div.appendChild(new_input);
  p.appendChild(div);
  length++;
}

function add_input_old() {
  add_input_from_select(document.getElementById("selector"));
}

<select id="selector" onchange="add_input_from_select(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br>
<form>
  <div id="inputi"></div>
</form>

Answer 1

非常粗略，您可以添加button，就像您当前添加input和div一样，但是将点击事件绑定到button，以便在单击时删除它的父项及其中的所有内容。

var p = document.getElementById("inputi");
var length = 1;

function add_input_from_select(select) {
  var new_input = document.createElement("input");
  var div = document.createElement('div');
  var button_delete = document.createElement('button');
  
  new_input.name = "my_input";
  new_input.value = select.value;
  button_delete.innerText = "Delete"
  button_delete.addEventListener("click", function(){
    this.parentNode.remove();
  });
  div.innerHTML = '<br>div элемент №' + length + '<br>';
  div.appendChild(new_input);
  div.appendChild(button_delete);      
  
  p.appendChild(div);
  length++;
}

function add_input_old() {
  add_input_from_select(document.getElementById("selector"));
}

<select id="selector" onchange="add_input_from_select(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br>
<form>
  <div id="inputi"></div>
</form>

Answer 2

这些是我为实现目标而创造的东西

• 创建一个删除按钮并将其附加到div
• 为删除按钮创建了一个onclick事件，并使用display:none删除了当前的div

var p = document.getElementById("inputi");
var length = 1;
var deleteBtn;
function add_input_from_select(select) {
  var new_input = document.createElement("input");
  new_input.name = "my_input";
  new_input.value = select.value;
  var div = document.createElement('div');

  deleteBtn = document.createElement('button'); //Adding delete button
  deleteBtn.innerHTML = 'Delete';
  deleteBtn.setAttribute("type", "button"); 

  div.innerHTML = '<br>div элемент №' + length + '<br>';
  div.appendChild(new_input);
  div.appendChild(deleteBtn);
  deleteBtn.setAttribute("onclick", function() { alert("blabla"); });
  p.appendChild(div);
  length++;

  deleteBtn.onclick = function(){  //Event for deleting the div
	div.style.display = "none";
 }

}

<select id="selector" onchange="add_input_from_select(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br>
<form>
  <div id="inputi"></div>
  </form>

Answer 3

虽然你的问题是以一种难以理解你想要的方式构建的，但我想我已经明白了。

我认为如果你试图在jQuery中这样做会更容易。这是一个非常简单的方法（我添加了一些评论，因为你是jQuery的新手） -

1 - 创建要添加到DOM的代码段代码。 （你只需要一个额外的按钮元素）。 2 - 使用jQuery根据点击和更改事件操纵DOM。

$(document).ready(function (){
  $('#selector').change(function() {
  	// getting the input tag ready with value from selector
   $divToAppend = '<div><input type="text" value="'+$(this).val()+'"><button type="button" id="btn-delete">Remove</button></div>'
    // appending the div to the form
  	$('form').append($divToAppend);
  });
  // binding a function to EVERY btn-delete ID in the 'form' scope
  $('#form').on('click', '#btn-delete', function() {
  // this goes to the btn-delete, looks for it's parent, which is the <div> and the removes it from the DOM
  	$(this).parent().remove();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selector">
  <option selected hidden>Select something!</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br>
<form id="form">

</form>