JavaScript中如何通过事件监听器访问列表值及删除选中列表元素

Hey there! Let's tackle your two JavaScript questions with clear, working examples that you can drop right into your code:

If you want to grab all the text values from your list elements when an event (like a button click) fires, here's a straightforward approach:

First, set up your HTML structure with a list and a trigger button:

<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>
<button id="getValuesBtn">Get All List Values</button>

Then, add the JavaScript to listen for the button click and extract the values:

const getValuesBtn = document.getElementById('getValuesBtn');
const myList = document.getElementById('myList');

getValuesBtn.addEventListener('click', () => {
  // Grab all <li> elements inside the list
  const listItems = myList.querySelectorAll('li');
  
  // Convert the NodeList to an array, then extract each item's text content
  const allValues = Array.from(listItems).map(item => item.textContent.trim());
  
  // Do whatever you need with the values—log them, display them, etc.
  console.log('All list values:', allValues);
  alert('List values: ' + allValues.join(', '));
});

Quick breakdown: #

• querySelectorAll('li') fetches every list item in your unordered list.
• Array.from() turns the returned NodeList into a regular array so we can use handy methods like map().
• textContent.trim() grabs the text inside each list item and removes any extra whitespace (like line breaks or spaces).

You could also attach the event listener directly to the list itself (instead of a button) if you want to trigger the value grab when someone clicks the list.

To make this work, we'll first track which list item the user selects, then delete that item when the button is clicked. Here's how to implement it:

First, your HTML (plus optional CSS to highlight the selected item):

<ul id="fruitList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>
<button id="deleteBtn">Delete Selected Item</button>

<style>
.selected {
  background-color: #aef;
  font-weight: bold;
}
</style>

Then the JavaScript logic:

const fruitList = document.getElementById('fruitList');
const deleteBtn = document.getElementById('deleteBtn');
let selectedItem = null; // Track the currently selected item

// Handle selecting a list item
fruitList.addEventListener('click', (e) => {
  // Make sure we actually clicked an <li> element
  if (e.target.tagName === 'LI') {
    // Deselect the previous item if there was one
    if (selectedItem) {
      selectedItem.classList.remove('selected');
    }
    // Mark the clicked item as selected
    selectedItem = e.target;
    selectedItem.classList.add('selected');
  }
});

// Handle the delete button click
deleteBtn.addEventListener('click', () => {
  if (selectedItem) {
    // Remove the selected item from the DOM
    selectedItem.remove();
    // Reset the selectedItem variable so we don't reference a deleted element
    selectedItem = null;
  } else {
    alert('Please select an item first!');
  }
});

How this works: #

• We use a variable selectedItem to keep track of which list item the user has clicked.
• When an <li> is clicked, we add a selected class to highlight it (and remove the class from any previously selected item to avoid multiple selections).
• When the delete button is clicked, we check if there's a selected item—if yes, we call remove() to delete it from the DOM, then reset selectedItem to null.
• If no item is selected, we show an alert to prompt the user to pick one first.

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