如何获取删除按钮对应note的索引并同步删除数组对应项？

数据老陈

2026-6-13

问题解决：删除笔记时同步更新存储数组

问题说明

已实现点击删除按钮移除页面上对应的note元素，但无法同步删除存储所有note文本内容的数组arr中的对应项。尝试事件委托后仍不清楚如何获取被点击元素对应的note索引，完成arr.splice(index,1)的操作。

解决方案

核心问题在于原代码依赖全局变量获取目标元素，且数组更新逻辑是遍历所有页面元素重新赋值，导致删除时无法精准定位数组索引。可以通过以下方式解决：

创建笔记时直接维护数组：新增笔记时将文本内容push到arr，同时给每个note元素添加data-index属性存储其在数组中的索引
删除时通过索引精准操作：点击删除按钮时，从note元素的data-index获取索引，直接用splice删除数组对应项，再移除页面元素
移除全局变量依赖：改用事件委托中的目标元素就近查询，避免全局变量污染

修改后的完整代码

HTML部分

<div class="container">
  <div class="add">
    <i class='fa-solid fa-plus'></i>
  </div>
  <div class="create-note">
    <h1 class='heading'>New Note</h1>
    <textarea name="" id="" placeholder="Enter your note..."></textarea>
    <button class='create-btn'>Create Note</button>
    <button class='close-btn'>Close</button>
  </div>
  <div class="edit-note">
    <h1 class='heading'>Edit Note</h1>
    <textarea name="" id="" class='textarea2'></textarea>
    <button class='edit-btn'>Edit Note</button>
    <button class='close-btn2'>Close</button>
  </div>
</div>

CSS部分

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  height: 340px;
  width: 665px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}
.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}
.add:hover {
  background-color: #f1f1f1;
}
.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}
.heading {
  margin-top: 16px;
  font-size: 32px;
}

textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}
.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}
.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}
.create-btn,.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}
.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}
.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
}
.fa-solid.fa-edit {
  margin-left: 94px;
}
.fa-solid.fa-trash {
  margin-left: 30px;
}
.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}
.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}
.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px; 
  border: none;
  border-radius: 14px;
  font-size: 14px;
}
@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }
  .add {
    margin-left: 20%;
  }
  .create-note {
    left: 0%;
    width: 374px;
  } 
  .note {
    margin-left: 70px;
    overflow-y: clip;
  }
  .inner-note {
    padding-top: 20px;
  }
  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}

JavaScript部分

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');

let arr = [];
let currentEditingInnerNote = null;

add_btn.addEventListener('click', () => {
  textArea.value = '';
  createNote.style.display = 'block';
});

close.addEventListener('click', () => {
  createNote.style.display = 'none';
});

create.addEventListener('click', () => {
  const text = textArea.value.trim();
  if (!text) return;

  let note = document.createElement('div');
  note.className = 'note';
  note.dataset.index = arr.length;
  
  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  innerNote.textContent = text;
  
  let edit = document.createElement('i');
  edit.className = 'fa-solid fa-edit';
  
  let del = document.createElement('i');
  del.className = 'fa-solid fa-trash';
  
  note.appendChild(innerNote);
  note.appendChild(edit);
  note.appendChild(del);
  container.appendChild(note);
  createNote.style.display = 'none';
  note.style.display = 'block';
  
  arr.push(text);
  console.log(`新增笔记，数组内容：${arr}`);
});

container.addEventListener('click', (event) => {
  const trgt = event.target;
  const parentNote = trgt.closest('.note');
  if (!parentNote) return;

  const innerNote = parentNote.querySelector('.inner-note');
  const noteIndex = parseInt(parentNote.dataset.index);

  if (trgt.matches('.fa-edit')) {
    currentEditingInnerNote = innerNote;
    textArea2.value = innerNote.textContent;
    editNote.style.display = 'block';
  } else if (trgt.matches('.fa-trash')) {
    arr.splice(noteIndex, 1);
    container.removeChild(parentNote);
    updateNoteIndices();
    console.log(`删除笔记后，数组内容：${arr}`);
  }
});

editBtn.addEventListener('click', () => {
  if (!currentEditingInnerNote) return;
  
  const newText = textArea2.value.trim();
  if (!newText) return;
  
  currentEditingInnerNote.textContent = newText;
  const noteIndex = parseInt(currentEditingInnerNote.closest('.note').dataset.index);
  arr[noteIndex] = newText;
  
  editNote.style.display = 'none';
  console.log(`编辑笔记后，数组内容：${arr}`);
});

closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
});

function updateNoteIndices() {
  const allNotes = document.querySelectorAll('.note');
  allNotes.forEach((note, index) => {
    note.dataset.index = index;
  });
  arr = Array.from(document.querySelectorAll('.inner-note')).map(el => el.textContent);
}

关键修改点说明

新增currentEditingInnerNote变量存储当前编辑元素，替代原全局变量，避免变量污染
创建笔记时给note元素添加data-index属性，直接关联数组索引，同时将文本push到数组
删除时通过parentNote.dataset.index获取索引，执行splice后调用updateNoteIndices更新剩余元素的索引，防止后续操作索引错乱
统一使用事件委托处理编辑和删除事件，减少内存占用，逻辑更清晰

内容的提问来源于stack exchange，提问作者Ikram Wani

如何获取删除按钮对应note的索引并同步删除数组对应项？

问题说明 #

解决方案 #

修改后的完整代码 #

HTML部分 #

CSS部分 #

JavaScript部分 #

关键修改点说明 #