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

Question

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

这是我的代码： 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

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

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

Answer 2

您可以使用 Node.parentNode before selecting the td using querySelector 遍历 DOM 来应用 checked class。

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

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

How can I add strikethrough property by clicking the button next to the element?

javascript

arrays

sorting

for-loop

addeventlistener

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

How can I add strikethrough property by clicking the button next to the element?

javascript

arrays

sorting

for-loop

addeventlistener

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