我有一个简单的笔记网络应用程序。每次用户单击“+”按钮时，都会添加一个新注释。一旦他点击“⟳”按钮，所有这些都被排除在外。我想在用户点击的笔记中添加五个新项目槽。为了做到这一点，我需要知道他这样做的是哪张纸条。最后一点让我感到困惑。如果所有按钮都是用户生成的，我怎么知道用户点击了哪个按钮？
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();
});
最佳答案
鉴于您的 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
}
这是将所有内容组合在一起的完整代码段。我把它放在 codepen 中，因为这里的代码片段编辑器在处理布局的某些部分时遇到了困难:https://codepen.io/29b6/pen/qBxxXqG
请记住，像这样遍历 DOM 并不理想。这种方法的主要问题是，如果您的 HTML 结构发生变化，您最终可能会链接多个 parentNode。在一起很快就会变得丑陋。但它应该可以帮助您理解按照您的要求选择元素的父元素的概念。
关于javascript - 在 JavaScript 中操作父标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72420418/