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

我创建的代码在我按下“addco-Pi”btn时克隆了一个div部分。在我的克隆创建者函数（JS）中，我为每个克隆指定我想要的id

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

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

感谢所有的帮助。多谢各位

这是我的密码。我正在使用php、html、javascript和sql

html:

---

**单击此处选择Co PI**

---

Javascript:

---

//此函数添加另一个Co PI下拉菜单，以便在按下按钮“Add”时进行选择
//document.getElementById（'Add_Query'）。onclick=duplicateDivSection；
var计数器=1；
//var limite=5；
//var original=document.getElementById（'dynamicInputCoPi'）；
函数duplicateDivSection（）{
document.getElementById（'Add_Query'）。onclick=duplicateDivSection；
//var计数器=1；
var limite=5；//最终的dynamicInputCoPi值将是“dynamicInputCoPi4”
var original=document.getElementById（'dynamicInputCoPi'）；
//var original=document.getElementById（divName）；
如果（计数器==limite）{//最终的dynamicInputCoPi值将是“dynamicInputCoPi4”
//警报（“您已达到添加“+i+”联合PI或联合调查员”的限制”）；
var return_Function=return_coPiCounting（）；
警报（“您已达到添加“+计数器+”合作PI或合作调查员的限制。\n”+“输入的总coPi金额为：“+返回函数”）；
}
否则{
var clone=original.cloneNode（true）；/“deep”clone。“true”表示克隆所有子节点和所有事件处理程序
//clone.id=divName+计数器；
//clone.id=divName+（i）；
clone.id=“dynamicInputCoPi”+（计数器）；//此id在第一次运行时将变为“dynamicInputCoPi1”
//或clone.id=“”；如果div不需要id
clone.getElementsByTagName（'select'）[0].id=“Co\u PI\u Query”+counter；//更改克隆的id
clone.getElementsByTagName（'select'）[0]。name=“Co\u PI\u Query”+counter；//更改克隆的名称
clone.append（“”）；//添加另一个按钮以删除表单选择
original.parentNode.appendChild（克隆）；//将所有更改附加到新克隆
//i++；
//计数器=计数器+1；
计数器++；
复印机计数（计数器）；
返回false；
}
}
//*******************************************************************************************************************
//删除最后一个co pi选择
函数deleteClone（toDelete）{
$（toDelete）.remove（）；
//计数器--；
}

---

---

您可以在创建时在克隆删除按钮上添加事件侦听器。调用deleteClone函数时，

此

将引用单击的

输入。从该
输入
引用中，我们可以获取父级（即该克隆的
div
）并将其删除-您甚至不需要div id

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


var original=document.getElementById（“dynamicInputCoPi”）；
因为（var i=1；我@Adnelon1很高兴我能帮上忙！
 <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> 

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