如何通过单击元素旁边的按钮添加删除线属性？

Question

我是编码新手，虽然遇到了一些问题，但我正在尝试制作一个购物清单应用程序。 我正在尝试选择表格的元素，它有两列，一列用于购物项目，一列用于每个项目旁边的按钮。我想单击该项目旁边的按钮，然后添加删除线的 CSS 样式，但仅适用于相应的项目。但现在我可以单击任何“标记为已购买按钮”，并将样式应用于所有项目，然后使用其他两个按钮按升序或降序对项目进行排序。一点帮助/提示将不胜感激。 提前谢谢你，如果我的帖子不是那么清楚，请告诉

这是我的代码： My code

let addItem = document.querySelector('.add-item');
let input = document.querySelector('input[type="text"]');
let table = document.querySelector('.list');
let tbody = document.querySelector('.tbody');

let ascBtn = document.querySelector('.btn-asc');
let descBtn = document.querySelector('.btn-desc');

// let itemsToSort = document.querySelector('.shopping-list-item');
// let shoppingItems = [];

addItem.addEventListener('click', addItemToList);
// ascBtn.addEventListener('click', ascend);
// descBtn.addEventListener('click', descend);

function addItemToList() {
    if (input.value !== '') {

        let tableRow = document.createElement('tr');
        let firstTableData = document.createElement('td');
        let secondTableData = document.createElement('td');
        let actionBtn = document.createElement('button');
        actionBtn.className = 'action-btn btn';
        actionBtn.innerText = 'Mark as buyed';
        firstTableData.className = 'shopping-list-item';
        tbody.appendChild(tableRow);
        firstTableData.innerHTML = input.value;
        tableRow.appendChild(firstTableData);
        secondTableData.appendChild(actionBtn)
        tableRow.appendChild(secondTableData);
        input.value = '';
        // console.log(firstTableData, secondTableData)
        // shoppingItems.push(input.value);

    }
}

input.addEventListener('keydown', keyPress);

function keyPress(e) {
    if (input.value !== '' && e.keyCode == 13) {

        let tableRow = document.createElement('tr');
        let firstTableData = document.createElement('td');
        let secondTableData = document.createElement('td');
        let actionBtn = document.createElement('button');
        actionBtn.className = 'action-btn btn';
        actionBtn.innerText = 'Mark as buyed';
        firstTableData.className = 'shopping-list-item';
        tbody.appendChild(tableRow);
        firstTableData.innerHTML = input.value;
        tableRow.appendChild(firstTableData);
        secondTableData.appendChild(actionBtn)
        tableRow.appendChild(secondTableData);
        input.value = '';

    }
}

table.addEventListener('click', function (e) {
    // console.log(e.target)
    // console.log('this works')
    let dynamicTd = document.querySelectorAll('.shopping-list-item');
    if (e.target && e.target.className == 'action-btn btn') {
        // console.log('this works too');
        for (let i = 0; i < dynamicTd.length; i++) {
            console.log(dynamicTd[i]);
            dynamicTd[i].className = 'checked';
        }

    }
})

// function ascend(a, b) {
//     let item = shoppingItems.value;
//     console.log(item);
// }

// function descend() {

// }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #6c757d;
}

.shopping-list {
  width: 1000px;
  margin: 0 auto;
  background-color: #2a9d8f;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.btn {
  display: inline-block;
}

.header {
  text-align: center;
  font-size: 60px;
  font-weight: 200;
  background-color: #f9f9f9;
  width: 100%;
  padding: 20px 0;
}

.form {
  width: 500px;
  padding: 30px 0;
}

.form input {
  width: 60%;
  padding: 10px 15px;
  border-radius: 5px;
  outline: none;
}

.form button {
  width: 30%;
  padding: 10px 10px;
  margin-left: 20px;
  border-radius: 5px;
  outline: none;
}

.btn-container {
  width: 50%;
}

.btn-container .btn {
  width: 30%;
  padding: 10px;
  border-radius: 5px;
  outline: none;
}

.list {
  background-color: #a8dadc;
  width: 50%;
  margin-top: 20px;
  border-radius: 5px;
  padding: 10px 20px;
}

.list th {
  padding: 10px 0;
}
.list td {
  width: 60%;
}

.action-btn {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  outline: none;
}

.checked {
  text-decoration: line-through;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Shopping List</title>
</head>
<body>
    <section class="shopping-list">
        <h2 class="header">Shopping List</h2>
        <!-- prevent from submitting and disappearing of items add onsubmit -->
        <form class="form" onsubmit="return false">
            <input type="text">
                    <!-- prevent from submitting and disappearing of items add type='button' -->
            <button type="button" class="add-item btn">Add Item</button>
        </form>
        <div class="btn-container">
            <button class="btn-asc btn">Sort asc</button>
            <button class="btn-desc btn">Sort desc</button>
        </div>
        <table class="list">
            <thead>

                <tr>
                    <th>Item</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody class="tbody">

            </tbody>
        </table>
    </section>

    <script src="app.js"></script>
</body>
</html>

Answer 1

您可以将添加到表的方法中的for 循环替换为点击侦听器：e.target.parentElement.previousSibling.className = 'checked'。

但这不是最好的解决方案。更好的方法是将列表项存储为数组中的对象并将数据集添加到删除按钮。然后，您可以根据数据集属性简单地删除该数组元素。

Answer 2

您可以使用Node.parentNode 向上遍历DOM，然后使用querySelector 选择td 以应用checked 类。

table.addEventListener("click", function (e) {
  if (e.target && e.target.className == "action-btn btn") {
    const td = e.target.parentNode.parentNode.querySelector("td")
    if (td) {
      td.className = "checked";
    }
  }
});

Codepen