Question

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>

注意：我的英语不太好。

当我点击添加笔记时会出现笔记，但是如果当我点击删除时有多个笔记，那么如果我点击第一个笔记删除它不会删除它，所以所有笔记都被删除。我希望当我点击删除时，一次只删除一个笔记

Answer 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>

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

1 个答案: