我正在嘗試撰寫一個待辦事項應用程式。但我在洗掉li元素時被卡住了。我已經開始寫代碼了，但我無法做到。我的想法是；首先達到element.offsetHeight，因為我認為即使元素的名稱和它們的類是相同的，它們的offsetHeight也是不同的。所以我想我可以洗掉它。但問題是我找不到正確的if陳述句，我的目標是要達到這樣的效果：
我也有這樣的問題。如何達到和被點擊的元素，我不能這樣做，因為跨度有相同的類
注意：跨度有相同的類。
注意：li里面的span需要和一個事件監聽器一起使用。我的意思是，當我們點擊span的時候，這個函式將被觸發。
。const X = document. querySelectorAll(".span"/span>)
console.log(X)
for (let i = 0; i < X.length; i ) {
let element = X[i] 。
if (element.offsetHeight == element.offsetHeight)
console.log("a"/span>)
}html {
box-sizing: border-box;
background-color: slategray;
}
.greywrap {
width: 100%;
background-color: slateblue;
}
.wrapper {
margin: 0 auto;
width: 40%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fcfff7;
border-radius: 20px;
}
.add-section {
display: flex;
width: 100%;
flex-direction: 行。
align-items: center;
justify-content: space-between;
background-color: #21A0A0;
border-radius: 20px;
border-bottom: 3px solid slategray;
input {
padding: 10px 20px;
text-align: center;
border-radius: 50px;
border: none;
margin: 10px;
box-shadow: 0 0 10px 2px rgba（0, 0, 0, 0. 089）。)
background-color: whitesmoke;
}
}
.btn {
padding: 10px 50px;
text-align: center;
border-radius: 30px;
border: none;
margin: 10px;
background-color: #FFE900。
}
.added-section {
width: 90%;
height: 150px;
background-color: #046865;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 20px;
box-shadow: 0 0 20px 2px rgba（0, 0, 0, 0. 062）。)
opacity: .6;
backdrop-filter: blur(16px) saturate(180%) 。
-webkit-backdrop-filter。模糊(16px) 飽和(180%)。
border: 2px solid black;
overflow: scroll;
ul {
padding: 0;
}
}
.list-item {
border-bottom: 1px solid #023f3d;
list-style-type: none;
background-color: #035c59;
padding-left: 15px;
box-shadow: 0 0 20px 2px rgba（0, 0, 0, 0. 062）。)
color: whitesmoke;
display: flex;
flex-direction: 行。
justify-content: space-between;
align-items: center;
}
.span {
margin-right: 10px;
transition: .5s;
padding: 0px 10px;
padding-top: 2px;
border-radius: 12px;
margin: 5px;
text-align: center;
}
.span:hover {
border: slategray;
background-color: whitesmoke;
color: slategray;
}<div class="graywrap">
<div class="wrapper">
<div class="add-section">/span>
< input id="inputText" type="text" placeholder="Add an item">
< button id="add?tem" class="btn"> 添加</button>。
</div>/span>
<div class="add-section">/span>
<ul id="list">
<li class="list-item">/span>DKDSKDK < span class="span"> X< /span></li>/span>
<li class="list-item">/span>DKDSKDK < span class="span"> X< /span></li>/span>
<li class="list-item">/span>DKDSKDK < span class="span"> X< /span></li>/span>
</ul>/span>
</div>/span>
<button class="btn" id="clear-all">> 清除所有</按鈕>
</div>uj5u.com熱心網友回復：
沒有必要使用element.offsetHeight來確定用戶點擊了哪個元素。MouseEvent包含了你所需要的所有資訊。
通過使用element.offsetHeight來確定用戶點擊的元素。
通過使用MouseEvent#currentTarget屬性，您將可以訪問<span/>元素。然后通過使用element#parentNode，您將可以訪問父級<li />元素。
const X = document. querySelectorAll(".span"/span>)
for (let i = 0; i < X.length; i ) {
let element = X[i] 。
element.addEventListener('click'/span>, function(event) {
const parentListItem = event.currentTarget.parentNode。
if (parentListItem) parentListItem.remove();
});
}html {
box-sizing: border-box;
background-color: slategray;
}
.greywrap {
width: 100%;
background-color: slateblue;
}
.wrapper {
margin: 0 auto;
width: 40%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fcfff7;
border-radius: 20px;
}
.add-section {
display: flex;
width: 100%;
flex-direction: 行。
align-items: center;
justify-content: space-between;
background-color: #21A0A0;
border-radius: 20px;
border-bottom: 3px solid slategray;
input {
padding: 10px 20px;
text-align: center;
border-radius: 50px;
border: none;
margin: 10px;
box-shadow: 0 0 10px 2px rgba（0, 0, 0, 0. 089）。)
background-color: whitesmoke;
}
}
.btn {
padding: 10px 50px;
text-align: center;
border-radius: 30px;
border: none;
margin: 10px;
background-color: #FFE900。
}
.added-section {
width: 90%;
height: 150px;
background-color: #046865;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 20px;
box-shadow: 0 0 20px 2px rgba（0, 0, 0, 0. 062）。)
opacity: .6;
backdrop-filter: blur(16px) saturate(180%) 。
-webkit-backdrop-filter。模糊(16px) 飽和(180%)。
border: 2px solid black;
overflow: scroll;
ul {
padding: 0;
}
}
.list-item {
border-bottom: 1px solid #023f3d;
list-style-type: none;
background-color: #035c59;
padding-left: 15px;
box-shadow: 0 0 20px 2px rgba（0, 0, 0, 0. 062）。)
color: whitesmoke;
display: flex;
flex-direction: 行。
justify-content: space-between;
align-items: center;
}
.span {
margin-right: 10px;
transition: .5s;
padding: 0px 10px;
padding-top: 2px;
border-radius: 12px;
margin: 5px;
text-align: center;
}
.span:hover {
border: slategray;
background-color: whitesmoke;
color: slategray;
}<div class="graywrap">
<div class="wrapper">
<div class="add-section">/span>
< input id="inputText" type="text" placeholder="Add an item">
< button id="add?tem" class="btn"> 添加</button>。
</div>/span>
<div class="add-section">/span>
<ul id="list">
<li class="list-item">/span>DKDSKDK < span class="span"> X< /span></li>/span>
<li class="list-item">/span>DKDSKDK < span class="span"> X< /span></li>/span>
<li class="list-item">/span>DKDSKDK < span class="span"> X< /span></li>/span>
</ul>/span>
</div>/span>
<button class="btn" id="clear-all">> 清除所有</按鈕>
</div>uj5u.com熱心網友回復：
你可以做到
const spans = document. querySelectorAll(".span")。
spans.forEach(span class="hljs-params">span => {
span.addEventListener("click", (evt) => {
span.parentElement.remove（）。
});
})
這將為每個類別為 "span "的專案添加一個處理程式，該處理程式將移除其父元素。
uj5u.com熱心網友回復：
首先，我建議你為DKDSKDK使用不同的文本，例如
<li class="list-item"/span>> DKDSKDK 1< span class="span">X</span> </li>
<li class="list-item">DKDSKDK 2< span class="span">/span>X< /span></li>
<li class="list-item"> DKDSKDK 3< span class="span">/span>X< /span></li>
這將有助于確保正確的任務專案被洗掉。
第二，偏移高度。
其次，offset height將得到該元素的高度，從我所看到的情況來看，這三個元素的offsetheight都是20。
最后，你只需要在span上添加一個事件監聽器來洗掉它的父元素：
const X = document. querySelectorAll(".span"/span>)
// console.log(X)/span>
for (let i = 0; i < X.length; i ) {
let element = X[i];
element.addEventListener("click"/span>,function(){
// this.parentElement.remove(); 這是指 span
element.parentElement.remove()。
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320454.html
標籤：