JavaScript开发需求：删除数组相同innerText及移除对应元素added类

Hey there! Let's tackle your two requirements one by one using the HTML structure you shared. I'll keep things clear with code examples and explanations that fit your use case.

1. Remove Elements with Matching innerText from Both Lists #

I’m assuming you want to delete elements that have the same text content from both the .table ul list and the .btn-wrap list. Here’s how to do that with JavaScript:

First, we’ll grab all the elements from both lists and convert them into arrays (since DOM collections are a bit clunky to work with):

// Get all list items from the table's ul
const tableListItems = Array.from(document.querySelector('.table ul').children);
// Get all list items from the btn-wrap ul
const btnWrapListItems = Array.from(document.querySelector('.btn-wrap').children);

Next, we’ll find all the text values that appear in both lists, then remove any elements that match those values:

// Extract trimmed text from each list to avoid whitespace issues
const tableTexts = new Set(tableListItems.map(item => item.innerText.trim()));
const btnWrapTexts = new Set(btnWrapListItems.map(item => item.querySelector('span').innerText.trim()));

// Find text values that exist in both lists
const matchingTexts = [...tableTexts].filter(text => btnWrapTexts.has(text));

// Remove elements with matching text from both lists
matchingTexts.forEach(text => {
  // Delete from table list
  tableListItems.forEach(item => {
    if (item.innerText.trim() === text) item.remove();
  });
  // Delete from btn-wrap list
  btnWrapListItems.forEach(item => {
    if (item.querySelector('span').innerText.trim() === text) item.remove();
  });
});

If you meant something slightly different (like only removing duplicates from one list instead of both), just let me know—I can adjust this code easily!

2. Remove the added Class When Clicking Delete Buttons #

This task is about responding to button clicks to modify the corresponding list item’s class. I’ll show you two approaches: one for static content, and a more robust one for dynamic content.

Approach 1: Event Delegation (Best for Dynamic Buttons) #

If your delete buttons might be added to the page after it loads (like via AJAX or user actions), event delegation is the way to go. It listens for clicks on the parent container, so it works for new elements too:

// Attach listener to the btn-wrap container
document.querySelector('.btn-wrap').addEventListener('click', (event) => {
  // Make sure we clicked a delete button
  if (event.target.classList.contains('delete')) {
    // Get the text from the span in the same li
    const targetText = event.target.closest('li').querySelector('span').innerText.trim();
    // Find the .added element with matching text
    const targetElement = Array.from(document.querySelectorAll('.added')).find(el => el.innerText.trim() === targetText);
    
    // Remove the 'added' class if we found the element
    if (targetElement) {
      targetElement.classList.remove('added');
    }
  }
});

Approach 2: Direct Event Listeners (For Static Content) #

If your buttons are already on the page when it loads and won’t change later, you can attach listeners directly to each button:

// Loop through all delete buttons and add click listeners
document.querySelectorAll('.btn-wrap .delete').forEach(button => {
  button.addEventListener('click', () => {
    const targetText = button.closest('li').querySelector('span').innerText.trim();
    const targetElement = Array.from(document.querySelectorAll('.added')).find(el => el.innerText.trim() === targetText);
    
    if (targetElement) {
      targetElement.classList.remove('added');
    }
  });
});

Quick Notes: #

• I used .trim() everywhere to avoid issues with accidental spaces in the text content.
• Event delegation is almost always the better choice because it’s more flexible—you don’t have to reattach listeners if you add new buttons later.

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