像google keep这样的项目，但是当我单击单个删除时，它会删除所有内容答案

【问题标题】：project like google keep, but when i click on single delete it deletes everything像google keep这样的项目，但是当我单击单个删除时，它会删除所有内容
【发布时间】：2021-05-04 05:27:51
【问题描述】：

var btn1=document.querySelector(".btn");
const remover=( text ='')=>{
    var note=document.createElement("div");
    note.classList.add('note')
    const htmldata=`
    
    <div class="operations">
          <button class="btn1">  <i class="fas fa-edit "></i></button>
           <button id="btn2"> <i class="fas fa-trash-alt">delete</i></button>
            
        </div>
        <textarea ></textarea> 
    
    `
    note.insertAdjacentHTML("afterbegin",htmldata)
    document.body.appendChild(note)

    var deletebtn=document.querySelector("#btn2")
    deletebtn.addEventListener("click",()=>{
        note.remove()
    })
}



btn1.addEventListener("click",remover)

<body>
    <header>
      <i class="far fa-sticky-note fa-5x"></i>
      <p id="headertext">Adoo Notes</p>
    </header>
    <section>
      <button class="btn">Add Note</button>
    </section>

    <!-- <div class="note">
         
    </div>  -->
    <script src="index.js"></script>

注意：我的英语不太好。

当我单击添加注释时，会出现注释，但是如果单击删除时有多个注释，因此如果单击第一个注释删除则不会删除它，因此所有注释都将被删除。我想要当我点击删除时，一次只删除一个笔记

【问题讨论】：

您的 add 函数本身称为 remover。这本身就是一个危险信号。在功能上分离添加和删除
你能解释一下我需要做什么吗？？

标签： javascript html css web

【解决方案1】：

在您创建的笔记中找到删除按钮，如下所示：

var deletebtn = note.querySelector("#btn2")

以下代码将始终返回第一个匹配项，即第一个删除按钮。在那张纸条上，id 应该是唯一的，因此您应该将其更改为一个类。

document.querySelector("#btn2")

var btn1 = document.querySelector(".btn");
const remover = (text = '') => {
  var note = document.createElement("div");
  note.classList.add('note')
  const htmldata = `
    
    <div class="operations">
          <button class="btn1">  <i class="fas fa-edit "></i></button>
           <button id="btn2"> <i class="fas fa-trash-alt">delete</i></button>
            
        </div>
        <textarea ></textarea> 
    
    `
  note.insertAdjacentHTML("afterbegin", htmldata)
  document.body.appendChild(note)

  var deletebtn = note.querySelector("#btn2")
  deletebtn.addEventListener("click", () => {
    note.remove()
  })
}



btn1.addEventListener("click", remover)

<body>
  <header>
    <i class="far fa-sticky-note fa-5x"></i>
    <p id="headertext">Adoo Notes</p>
  </header>
  <section>
    <button class="btn">Add Note</button>
  </section>

  <!-- <div class="note">
         
    </div>  -->
  <script src="index.js"></script>

【讨论】：