如何在 html 中使用 javascript 创建的特定克隆，当在该克隆的 div 中按下按钮时

Question

当我按"添加 Co-Pi"btn 时，我创建的代码会克隆一个div 部分。在我的克隆创建器函数 (JS( 中，我指定了我希望每个克隆具有的 id。

我现在在div 中添加了一个删除按钮，以消除该按钮在其中找到自己的克隆div。问题是，我似乎找不到如何获取在按下删除按钮时我所有元素都在里面的div id。我知道我可以手动键入div 名称并将其作为参数发送到删除函数，但是，我希望删除按钮自动提取div id 并将其发送到删除函数。

我知道我可能没有正确解释自己，我是使用javascript和html的新手。

感谢所有帮助。谢谢。

这是我的代码。我正在使用php，html，javascript和sql。

.html：

---

<div id="dynamicInputCoPi">

<!-- <select id='Co_PI_Query' name='Co_PI_Query' onClick= "showId(this.id);">   -->
<select id='Co_PI_Query' name='Co_PI_Query' onClick="copiSelection(1);">    
<?php    
//This code shows all the selected values from the co-pi table and displays them in a dropdown menu.
//The value is selected by the idCoPI   
//First Query //Select * could be changed to select specified data to be shwn
$query = "SELECT *
FROM co_pi_table
";

/**       */
//Checks to see if query is successful        
$result = mysqli_query($conn, $query);                  
if($result == false){
die ('<br>Error in Query to CoPI Database Table : ' . mysqli_error($conn));
}
?>
<option value="">**Click here to select Co-PI**</option>
<?php
//echo "I am here";
//Start While
while ($row = mysqli_fetch_array($result)) {
?> 
<!-- Options inside the DropMenu will be populated by the query -->
<option value=" <?php echo $row['idCoPI'];?> ">
<?php //echo $row['idCoPI'] . " | " . $row['Fname'] . "-" . $row['Lname'];
echo $row['Fname'] . ", " . $row['Lname'] . "-" . $row['SLname'];
?>
</option>
<?php
} //End of While
?>  
</select>         
<input type="button" value="+ Add Co-Pi" onClick="openCoPiWin();"> 
<input type="button" id="Reload_Query" value="Refresh Query" onClick="reloadQuery();">
<br>
<!--
<input type="button" id="Add_Query" value="Select another Co-Pi" onClick="duplicateDivSection(dynamicInputCoPi);">
-->
<input type="button" id="Add_Query" value="Select another Co-Pi" onClick="duplicateDivSection();">
<br>  
<input type="button" id="Delete_Query" value="Delete this selection" onClick="deleteClone(document.getElementById('dynamicInputCoPi1'));">
<br>
</div>
</div> 

---

Javascript：

---

//This function adds another Co-PI dropdown menu to select from when button "Add" is pressed
//document.getElementById('Add_Query').onclick = duplicateDivSection;
var counter = 1;
//var limite = 5;
//var original = document.getElementById('dynamicInputCoPi');

function duplicateDivSection(){
document.getElementById('Add_Query').onclick = duplicateDivSection;
//var counter = 1;
var limite = 5; //Final dynamicInputCoPi value will be "dynamicInputCoPi4"
var original = document.getElementById('dynamicInputCoPi');

//var original = document.getElementById(divName);
if (counter == limite)  { //Final dynamicInputCoPi value will be "dynamicInputCoPi4"
//alert("You have reached the limit of adding " + i + " Co-PI or Co-Investigators");
var return_Function = return_coPiCounting();
alert("You have reached the limit of adding " + counter + " Co-PI or Co-Investigators.n" + "Amount of total coPi entered is: " + return_Function );
}
else {
var clone = original.cloneNode(true); // "deep" clone. "true" means clone all childNodes and all event handlers
//clone.id = divName + counter;
//clone.id = divName + (i);
clone.id = "dynamicInputCoPi" + (counter); //This id will become "dynamicInputCoPi1" the first time it runs
// or clone.id = ""; if the divs don't need an ID
clone.getElementsByTagName('select')[0].id = "Co_PI_Query" + counter; //Changes id of clone
clone.getElementsByTagName('select')[0].name = "Co_PI_Query" + counter; //Changes name of clone
clone.append('<input type="button" value="Delete Co-PI" name="Delete_CoPI">'); //Adds another button to delete form selection
original.parentNode.appendChild(clone); //appends all changes to new clone
//i++;
//counter = counter + 1;
counter++;
coPiCounting(counter);
return false;
}
}
//*******************************************************************************************************************

//Deletes last co-pi selection 
function deleteClone(toDelete){
$(toDelete).remove();
//counter--;
}

---

Answer 1

您可以在创建克隆删除按钮上添加事件侦听器。调用 deleteClone 函数时，this将引用单击的input。从该input引用中，我们可以获取父级(这是该克隆的div(并删除它 - 您甚至不需要div id。

下面是一个使用createElement创建删除按钮并向其中添加事件侦听器的示例。

var original = document.getElementById("dynamicInputCoPi");
for (var i = 1; i <= 3; i++) {
cloneOriginal(i);
}
function cloneOriginal(counter) {
var clone = original.cloneNode(true);
clone.id = "dynamicInputCoPi" + counter;

clone.appendChild(createDeleteButton(counter));
original.parentNode.appendChild(clone);
counter++;
}
function deleteClone() {
this.parentNode.remove();
}
function createDeleteButton(counter) {
var deleteElem = document.createElement("input");
deleteElem.type = "button";
deleteElem.value = "Delete Co-PI " + counter;
deleteElem.name = "Delete_CoPI";
deleteElem.addEventListener("click", deleteClone);
return deleteElem;
}

<div id="container">
<div id="dynamicInputCoPi">
<p> hello </p>
</div>
</div>