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，但是将click事件绑定到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。

wp-config.php

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

删除创建的div js

3 个答案: