开发自定义多选题测验：如何点击按钮删除questionBank对应数组元素？

Got it, let's break down why your current delete button only removes the first element and how to fix it to target the exact question tied to each button.

The Problem with Your Current Code #

Your line <button onClick="questionBank.splice(1,1)">Delete me</button> hardcodes the index 1 into the splice call. No matter which button you click, it will always remove the element at index 1 (the second item in your array, since arrays are 0-indexed). That's why it never targets the question linked to the button you clicked.

The Solution: Pass the Question's Index to the Delete Function #

You need to make each button aware of the index of the question it's associated with. Here's how to implement this step by step:

1. Generate Buttons with Their Corresponding Index
   When you're building the HTML for each question (I assume you're looping through questionBank), pass the current index to a dedicated delete function instead of hardcoding splice:

   // Example: Using forEach to loop through your questionBank array
   questionBank.forEach((question, index) => {
     // Build your question's HTML content first
     bodyText += `
       <div class="question-card">
         <p>${question.text}</p>
         <!-- Add your options HTML here -->
         <button onClick="deleteQuestion(${index})">Delete me</button>
       </div>
     `;
   });
   

2. Create the Reusable Delete Function
   Write a function that takes the index as a parameter, removes the correct element from questionBank, and updates the UI to reflect the change:

   function deleteQuestion(index) {
     // Guard clause to avoid errors from invalid indexes
     if (index < 0 || index >= questionBank.length) return;
   
     // Remove the question at the specified index
     questionBank.splice(index, 1);
     // Re-render the question list to show the updated array
     renderQuestionBank(); // Replace this with your actual render function name
   }
   

A Safer Alternative: Use addEventListener (Avoid String-Based OnClicks) #

If you want to skip messy string concatenation and reduce XSS risks, create the button element dynamically and attach the click handler with addEventListener:

questionBank.forEach((question, index) => {
  const questionCard = document.createElement('div');
  questionCard.className = 'question-card';
  
  // Add your question text and options to the card here
  questionCard.innerHTML = `<p>${question.text}</p>`;
  
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Delete me';
  deleteBtn.addEventListener('click', () => {
    deleteQuestion(index);
  });
  
  questionCard.appendChild(deleteBtn);
  // Append the card to your page's container
  document.getElementById('quiz-container').appendChild(questionCard);
});

This way, the index is captured in the event handler's closure, so each button inherently knows exactly which question to delete.

Key Takeaway #

The core issue was that your delete button had no reference to the specific question it belonged to. By passing or capturing the question's index in questionBank, you can tell splice exactly which element to remove, making the delete action work as intended.

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