An update has been made to my previous response: Upon reviewing the question and examining the provided HTML code again, I have revised my solution.
To clarify the question at hand: The original poster (OP) wants to remove a class from the list elements based on clicking the 'delete' button in a separate list below. I have adjusted my code snippet accordingly to achieve this functionality. Please let me know if this modification does not meet your requirements, so that I can further tailor my solutions to address any discrepancies.
const addedList = document.querySelectorAll('.added');
document.querySelectorAll('.delete').forEach(btn => {
btn.addEventListener('click', e => {
e.preventDefault();
const deletedVal = e.target.previousSibling.previousSibling.textContent;
addedList.forEach(listItem => {
if (listItem.textContent === deletedVal) {
listItem.classList.remove('added');
}
});
});
});
.added {
color: blue;
}
<div class="table">
<ul>
<li class="added">list_1</li>
<li class="added">list_2</li>
<li class="added">list_3</li>
</ul>
<ul class="btn-wrap">
<li>
<span>list_1</span>
<button class="delete">Delete</button>
</li>
<li>
<span>list_2</span>
<button class="delete">Delete</button>
</li>
<li>
<span>list_3</span>
<button class="delete">Delete</button>
</li>
</ul>
</div>