操纵 JavaScript 中的父标签

Question

我有一个简单的笔记记录 web 5 应用程序。每次用户单击“+”按钮时，都会添加一个新注释。一旦他点击“⟳”按钮，所有这些都被排除在外。我想在用户点击的笔记中添加五个新项目槽。为了做到这一点，我需要知道他这样做的是哪张纸条。最后一点让我感到困惑。如果所有按钮都是用户生成的，我怎么知道用户点击了哪个按钮？

HTML:

<html lang="en">
  <head>
    <title>To Do Lists</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div class="top_bar">
      <button id="plus">+</button>
      <button id="restart">⟳</button>
    </div>
    <div id="notes" class="notes">

    </div>
  </body>
</html>

CSS

    padding: 0px;
    margin: 0px;
}
body{
    display: flex;
    flex-direction: column;
}
.top_bar{
    width: 100%;
    height: 10vh;
    background-color: #95E29B;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
button{
    font-size: 35px;
    border: none;
    width: 15%;
    height: 10vh;
    background-color: #3BCE4B;
    cursor: pointer;
}
.notes{
    width: 100%;
    height: 90vh;
    overflow: auto;
    background-color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.note{
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    height: 40vh;
    width: 30%;
    border-radius: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;

}

.note_input{
    margin-top: 20px;
    margin-right: 5%;
    font-size: 30px;
    width: 90%;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    border-color: black;
}

form{
    margin-top: 10px;
    margin-right: 15%;
    width: 80%;
    height: 49%;
    overflow-y: auto;
}

li{
    border: none;
    width: 70%;
    display: flex;
}

.li_input{
    border-style: solid;
    border-color: black;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-left: 10px;
    font-size: 20px;
}

.more_items{
    width: 35px;
    height: 35px;
    margin-right: 2%;
    border-radius: 100%;
    font-size: 20px;
}

JavaScript

const add_note = () => {
  // Creates a new note and its props
  const new_note = document.createElement("div");
  const new_input = document.createElement("input");
  const new_form = document.createElement("form");
  const new_ol = document.createElement("ol");
  const new_button = document.createElement("button");

  //Populates the new note with inputs and checkboxes
  for (let i = 0; i < 5; i++) {
    let new_li = document.createElement("li");
    let new_checkbox = document.createElement("input");
    new_checkbox.setAttribute("type", "checkbox");
    let new_li_input = document.createElement("input");
    new_li_input.classList.add("li_input");
    new_ol.appendChild(new_li);
    new_li.appendChild(new_checkbox);
    new_li.appendChild(new_li_input);
  }

  //New note's settings
  new_note.classList.add("note");
  new_note.appendChild(new_input);
  new_input.classList.add("note_input");
  new_input.setAttribute("placeholder", "Note's title");
  new_note.appendChild(new_form);
  new_ol.classList.add("ols");
  new_form.appendChild(new_ol);
  new_note.appendChild(new_button);
  new_button.classList.add("more_items");

  //Inserts the new note and button
  const note_block = document.getElementById("notes");
  note_block.appendChild(new_note);
  new_button.addEventListener("click", add_more_items);
  new_button.innerHTML = "+";
};

//Adds more items
const add_more_items = () => {
  //console.log(new_button.parentElement.nodeName);
  //let new_ol = document.getElementsByClassName("ols")[];
  for (let i = 0; i < 5; i++) {
    let new_li = document.createElement("li");
    let new_checkbox = document.createElement("input");
    new_checkbox.setAttribute("type", "checkbox");
    let new_li_input = document.createElement("input");
    new_li_input.classList.add("li_input");
    new_ol.appendChild(new_li);
    new_li.appendChild(new_checkbox);
    new_li.appendChild(new_li_input);
  }
};

//Removes all notes
const remove_note = () => {
  let amount_of_notes = document.getElementsByClassName("note").length;
  console.log(amount_of_notes);
  while (amount_of_notes != 0) {
    amount_of_notes--;
    document.getElementsByClassName("note")[amount_of_notes].remove();
  }
  alert("All notes were removed.");
};

// Loads the buttons
const load_buttons = () => {
  document.getElementById("plus").addEventListener("click", add_note);
  document.getElementById("restart").addEventListener("click", remove_note);
};

// Main method
document.addEventListener("DOMContentLoaded", () => {
  load_buttons();
});

Answer 1

鉴于您的 html 相当简单，您可以使用 parentNode.

以基本的方式完成此操作

您当前的代码有误，因为您正试图将 new_ol 添加新的 <li> 元素，但它不存在于 add_more_items 函数的范围内。即使它确实如此，它也将是模棱两可的 - <ol> 它应该指代哪个？

相反，您可以从单击的按钮计算出父级 <ol>，如下所示：

const add_more_items = (e) => {
  const new_ol = e.target.parentNode.querySelector('ol');
  // rest of your code
}

这是将所有内容组合在一起的完整代码段。我把它放在代码笔中，因为这里的代码片段编辑器在布局的某些部分遇到了困难：https://codepen.io/29b6/pen/qBxxXqG

请记住，像这样遍历 DOM 并不理想。这种方法的主要问题是，如果您的 HTML 结构发生变化，您最终可能会将多个 parentNode 链接在一起，这很快就会变得丑陋。但它应该可以帮助您理解按照您的要求选择元素的父元素的概念。

操纵 JavaScript 中的父标签

Manipulating a parent tag in JavaScript

html

javascript

tags