如何在javascript中添加克隆部分之前克隆一行但用另一个替换元素

如何解决如何在javascript中添加克隆部分之前克隆一行但用另一个替换元素

我是 JavaScript 新手。这是我的 HTML 代码：

<div id="add-dependent" class="this-part">
        <div class="form-row mb-2 dependents">
            <div class=" col-lg-2 col-md-3 col-sm-3 col-5 ">
                <label class="text-left" contenteditable="true">Applicant 1: </label>
            </div>
            <div class="col-lg-5 col-md-5 col-sm-5 col-7">
                  <input class="float-left form-control m-100" type="number"                      
                                  placeholder="age">
            </div>
        </div>
        <div class="form-row mb-5 dependent">
            <div class=" col-lg-2 col-md-3 col-5 ">
                <button id="btn" name="btn" type="button" class="close "                        onClick="$(this).parent().parent().remove();" >x</button>
            </div>
            <div class="col-lg-5 col-md-5 col-sm-5 col-7">
                  <input class="float-left form-control m-100" type="number"                       style="font-size:15px" id="validationDefault28"  required                      placeholder="age">
            </div>
        </div>
        <button id="dependent"  class="funnelbtn mx-auto border"                        
 onClick="addDependent()">Add dependent</button>
    </div>
            
    <button id="add-applicant" class="funnelbtn mx-auto border"  onClick="addApplicant()">Add 
     applicant</button>

现在我想为“添加依赖”按钮编写一个 onclick 脚本来克隆行 (id="dependents")。实际上我想在每次单击“添加依赖”按钮时添加一行。这里重要的是在克隆之后，应将申请人 1 替换为一个可关闭的按钮，该按钮删除克隆的行（与第二行相同）。我写的脚本如下

function addDependent(){
             var old_elem = document.getElementById("dependents");
      var new_elem = document.createElement("button");
    
      var new_content = document.createTextNode("x");
      new_elem.append("new_content");
      old_elem.replaceWith("new_elem");
      new_elem.id="close"+nextLabeL++;
       new_elem.setAttribute("onClick","click();");
            var clone=elem.cloneNode(true);
            clone.id= "dependent" + nextLabel;
            var add= document.getElementById("dependent");
      
            elem.parentElement.insertBefore(clone,add);
      
        }

但是在 chrom 中，我收到一个错误，其中没有找到“replaceWith”。它不起作用。

此外，我想为“添加申请人”按钮编写一个脚本，该按钮克隆 with id="add-dependent" 。并且克隆应该是可关闭的。在这里，我面临的问题是当添加一行并单击“申请人”标签旁边创建的关闭按钮时，第一个被清除。例如，当我想删除带有“applicant3”标签的第二个时，删除带有“applicant1”标签的标签。这是我的脚本：

function addApplicant(){
            var elem= document.querySelector("#add-dependent");
            var clone=elem.cloneNode(true);
            var add= document.getElementById("add-applicant");
            elem.parentElement.insertBefore(clone,add);
      var label = clone.querySelector("label");
  label.innerHTML = '<button  class="close remove" style="font-size:12px;" onClick="remove()">x</button>' + "Applicant " + (nextLabeL++) ;
 var id=document.getElementById('add-dependent');
 id.id = "add-dependent" + (nextId++);
        } 

最后我添加了我的全部代码。

function addDependent(){
            var elem= document.querySelector(".dependent");
            var clone=elem.cloneNode(true);
            var add= document.getElementById("dependent");
            elem.parentElement.insertBefore(clone,add);
        }
    let nextLabel=2
    let nextId=1
function addApplicant(){
            var elem= document.querySelector("#add-dependent");
            var clone=elem.cloneNode(true);
            var add= document.getElementById("add-applicant");
            elem.parentElement.insertBefore(clone,add);
      var label = clone.querySelector("label");
  label.innerHTML = '<button  class="close remove" style="font-size:12px;" onClick="remove()">x</button>' + "Applicant " + (nextLabeL++) ;
 var id=document.getElementById('add-dependent');
 id.id = "add-dependent" + (nextId++);
        } 
    
  
        
        
    
        function addDependent(){
             var old_elem = document.getElementById("dependents");
      var new_elem = document.createElement("button");
    
      var new_content = document.createTextNode("x");
      new_elem.append("new_content");
      old_elem.replaceWith("new_elem");
      new_elem.id="close"+nextLabeL++;
       new_elem.setAttribute("onClick",add);
      
        }
         function click(){
      var x= document.getElementById("close2");
      x.parent().remove();
    }

<div id="add-dependent" class="this-part">
        <div class="form-row mb-2 dependents">
            <div class=" col-lg-2 col-md-3 col-sm-3 col-5 ">
                <label class="text-left" contenteditable="true">Applicant 1: </label>
            </div>
            <div class="col-lg-5 col-md-5 col-sm-5 col-7">
                  <input class="float-left form-control m-100" type="number"   style="font-size:15px" id="validationDefault20"  required placeholder="age">
            </div>
                        
        </div>
        <div class="form-row mb-5 dependent">
            <div class=" col-lg-2 col-md-3 col-5 ">
                <button id="btn" name="btn" type="button" class="close " style="font-size:12px;" onClick="$(this).parent().parent().remove();" >x</button>
            </div>
            <div class="col-lg-5 col-md-5 col-sm-5 col-7">
                  <input class="float-left form-control m-100" type="number"   style="font-size:15px" id="validationDefault28"  required placeholder="age">
            </div>
        </div>
        <button id="dependent"  class="funnelbtn mx-auto border" style="width:190px;background-color:#ffffff; color:black;Box-shadow: 0px 0px 15px 5px rgba(0,.2); padding: 7px 5px; border-radius:5px; " onClick="addDependent()">Add dependent</button>
    </div>
            
    <button id="add-applicant" class="funnelbtn mx-auto border" style="width:190px;background-color:#ffffff; color:black;Box-shadow: 0px 0px 15px 5px rgba(0,.2); padding: 7px 5px; border-radius:5px; " onClick="addApplicant()">Add applicant</button>