在 vanilla javascript 中使用 cloneNode() 创建这些选项卡后，有没有办法删除这些选项卡？答案

【问题标题】：Is there a way to delete this tabs after creating them using cloneNode() in vanilla javascript?在 vanilla javascript 中使用 cloneNode() 创建这些选项卡后，有没有办法删除这些选项卡？
【发布时间】：2022-08-03 08:21:03
【问题描述】：

我正在尝试在我的香草 JavaScript 中创建一个函数来删除使用 cloneNode(true) 创建的选项卡。以下是我尝试过的，但它不仅仅是工作。

我创建了一个名为 secondSectionEmail 的表单；单击按钮 (+) 时，使用 cloneNode() 复制表单。每个表单都带有一个 (x) 按钮，该按钮应该删除一个特定的选项卡。请问我该如何实现？

<form class=\"secondSectionEmail\"> 
 <button id=\"closeBtn\">x</button>
 <input type=\"email\" id=\"recipient\" placeholder=\"Enter Recipient Email\">
 <input type=\"text\" placeholder=\"Subject\"><br>
  <textarea type=\"text\" placeholder=\"Enter Message\"></textarea>
    <div class=\"upload\">
        <input type=\"file\" multiple>
        <button>Send Mail</button>
    </div>
 </form>
<br>
<br>
<button type=\"submit\" id=\"arrow\">+</button>

<script>
//script to add new tab
let addbutton = document.getElementById(\"arrow\");
var i = 0;

addbutton.addEventListener(\"click\", function (e) {
  e.preventDefault();
    let boxes = document.querySelector(\".secondSectionEmail\");
    let closeC = document.getElementById(\'closeBtn\');
    var clone = boxes.cloneNode(true);
  
    i++;
    clone.className=`secondSectionEmail${i}`;
    clone.classList.add(`mydiv`);
    closeC.classList.add(`timzy${i}`);
    boxes.after(clone);
})



//Script to delete tab
let deleteButton = document.querySelector(`.container`)

deleteButton.addEventListener(\"click\", function (event) {
event.preventDefault()
  var del = event.target.parentElement.className;
  let newDel = document.getElementsByClassName(`${del}`);
  let newDelete = Array.from(newDel)
  console.log(newDelete)
})
</script>

标签： javascript html frontend

【解决方案1】：

检查下面的 sn-p 以解决我的问题。我在发布问题两天后解决了这个问题，我觉得其他人可能需要这个解决方案。

解决方案：

else if(btnTarget==="closeBtn") { wholeSection.parentElement.removeChild(wholeSection); }

【讨论】：