為什么我的條件在聽眾中不能正常工作？

Question

在這個代碼中，在incomeList上的事件監聽器中有if條件。 有時這個條件即使是真的也沒有被執行。 大多數情況下，它在刷新頁面之后執行，之后它不會被執行。

我正在創建一個預算代碼，我通過創建一個div來增加收入和費用。在這個div中，我添加了帶有類名列表和數據屬性的刪除按鈕。 並在收入的父母div中推動整個div。 我也將數據屬性添加到父div。

並且我想在用戶點擊刪除按鈕時使那些添加的div刪除。

但每當我試圖通過匹配其數據屬性刪除按鈕數據值來刪除整個父div。 incomeList事件監聽器中的if條件隨機執行一次，只刪除整個div一次。 我檢查了類liston按鈕，還是我的每個ifList事件監聽器中的if（e.target.classList.contains（'list'）條件都沒有被執行。 我不知道為什么。 問題出在這一部分。 完整的代碼如下。

incomeList.addEventListener('click', function (e) {
  console.log('I am here');
  if (e.target.classList.contains('list')) {
    let data = e.target.dataset.btn;
    let removeElement = document.querySelector(`#income-${data}`)
    removeElement.remove();
  }
})

 let submit = document.querySelector('.add__btn') let money = document.querySelector('.add .add__value') let errorMessage = document.querySelector('.error') let enteredValue = 0; let descripetion = document.querySelector('.add__description'); let enteredDescription; let selector = document.querySelector('.add__type'); let incomeObjects = [] let income = document.createElement('LI'); let expenseObjects = [] let incomeIndex = 0; let expenseIndex = 0; const incomeList = document.querySelector('.income_list'); const expenseList = document.querySelector('.expenses__title'); function reset() { errorMessage.style.display = 'none'; } class Budget { constructor(description, value) { this.description = description; this.value = value; } } function addElement(value) { let table; let parentDiv = document.createElement('DIV'); let newDivLeft = document.createElement('DIV'); let newDivRight = document.createElement('DIV'); let newDivDelete = document.createElement('BUTTON'); if (value === 'inc') { table = document.querySelector('.income_list'); newDivDelete.setAttribute('class', 'list'); parentDiv.setAttribute('id', `income-${incomeIndex}`); newDivDelete.setAttribute('data-btn', `${incomeIndex}`); newDivLeft.innerHTML = `${incomeObjects[incomeIndex].description}`; newDivRight.innerHTML = `${incomeObjects[incomeIndex].value}CA$`; } else { table = document.querySelector('.expenses__list'); newDivDelete.setAttribute('class', 'list'); parentDiv.setAttribute('id', `income-${expenseIndex}`); newDivDelete.setAttribute('data-btn', `${expenseIndex}`); newDivLeft.innerHTML = `${expenseObjects[expenseIndex].description}`; newDivRight.innerHTML = `${expenseObjects[expenseIndex].value}CA$`; } parentDiv.style.display = 'flex' parentDiv.style.justifyContent = 'space-between' newDivLeft.style.display = 'inline'; newDivRight.style.display = 'inline'; newDivDelete.innerHTML = '<i class="fas fa-trash-alt"></i>' parentDiv.appendChild(newDivLeft); parentDiv.appendChild(newDivRight); parentDiv.appendChild(newDivDelete); table.appendChild(parentDiv); } submit.addEventListener('click', function (e) { if (e.target.nodeName === 'I' && selector.value === 'inc' && money.value !== '' && descripetion.value !== '') { reset(); if (money.value < 0) { errorMessage.style.display = 'block'; } else { enteredValue = money.value; enteredDescription = descripetion.value; incomeObjects.push(new Budget(enteredDescription, enteredValue)); addElement(selector.value); incomeIndex++ } } else if (e.target.nodeName === 'I' && selector.value === 'exp' && money.value !== '' && descripetion.value !== '') { reset(); if (money.value < 0) { errorMessage.style.display = 'block'; } else { enteredValue = money.value; enteredDescription = descripetion.value; expenseObjects.push(new Budget(enteredDescription, enteredValue)); addElement(selector.value); expenseIndex++ } } money.value = ''; descripetion.value = ''; }) incomeList.addEventListener('click', function (e) { console.log('I am here'); if (e.target.classList.contains('list')) { let data = e.target.dataset.btn; let removeElement = document.querySelector(`#income-${data}`) removeElement.remove(); } }) 

 /********************************************** *** GENERAL **********************************************/ * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; display: table; clear: both; } body { color: #555; font-family: Open Sans; font-size: 16px; position: relative; height: 100vh; font-weight: 400; } .right { float: right; } .red { color: #ff5049 !important; } .red-focus:focus { border: 1px solid #ff5049 !important; } /********************************************** *** TOP PART **********************************************/ .top { height: 40vh; background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(https://practice-project.niziol.ca/back.png); background-size: cover; background-position: center; position: relative; } .budget { position: absolute; width: 350px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .budget__title { font-size: 18px; text-align: center; margin-bottom: 10px; font-weight: 300; } .budget__value { font-weight: 300; font-size: 46px; text-align: center; margin-bottom: 25px; letter-spacing: 2px; } .budget__income, .budget__expenses { padding: 12px; text-transform: uppercase; } .budget__income { margin-bottom: 10px; background-color: #28b9b5; } .budget__expenses { background-color: #ff5049; } .budget__income--text, .budget__expenses--text { float: left; font-size: 13px; color: #444; margin-top: 2px; } .budget__income--value, .budget__expenses--value { letter-spacing: 1px; float: left; } .budget__income--percentage, .budget__expenses--percentage { float: left; width: 34px; font-size: 11px; padding: 3px 0; margin-left: 10px; } .budget__expenses--percentage { background-color: rgba(255, 255, 255, 0.2); text-align: center; border-radius: 3px; } /********************************************** *** BOTTOM PART **********************************************/ /***** FORM *****/ .add { padding: 14px; border-bottom: 1px solid #e7e7e7; background-color: #f7f7f7; text-align: center; } .error { margin: auto; display: inline-block; margin-top: 20px; background-color: #ffcdcd; border: 3px solid #c91212; padding: 10px; color: #c91212; border-radius: 5px; } .add__container { margin: 0 auto; text-align: center; } .add__type { width: 55px; border: 1px solid #e7e7e7; height: 44px; font-size: 18px; color: inherit; background-color: #fff; margin-right: 10px; font-weight: 300; transition: border 0.3s; } .add__description, .add__value { border: 1px solid #e7e7e7; background-color: #fff; color: inherit; font-family: inherit; font-size: 14px; padding: 12px 15px; margin-right: 10px; border-radius: 5px; transition: border 0.3s; } .add__description { width: 400px; } .add__value { width: 100px; } .add__btn { font-size: 35px; background: none; border: none; color: #28b9b5; cursor: pointer; display: inline-block; vertical-align: middle; line-height: 1.1; margin-left: 10px; } .add__btn:active { transform: translateY(2px); } .add__type:focus, .add__description:focus, .add__value:focus { outline: none; border: 1px solid #28b9b5; } .add__btn:focus { outline: none; } /***** LISTS *****/ .container { width: 1000px; margin: 60px auto; } .income { float: left; width: 475px; margin-right: 50px; } .expenses { float: left; width: 475px; } h2 { text-transform: uppercase; font-size: 18px; font-weight: 400; margin-bottom: 15px; } .icome__title { color: #28b9b5; } .expenses__title { color: #ff5049; } .item { padding: 13px; border-bottom: 1px solid #e7e7e7; } .item:first-child { border-top: 1px solid #e7e7e7; } .item:nth-child(even) { background-color: #f7f7f7; } .item__description { float: left; } .item__value { float: left; transition: transform 0.3s; } .item__percentage { float: left; margin-left: 20px; transition: transform 0.3s; font-size: 11px; background-color: #ffdad9; padding: 3px; border-radius: 3px; width: 32px; text-align: center; } .income .item__value, .income .item__delete--btn { color: #28b9b5; } .expenses .item__value, .expenses .item__percentage, .expenses .item__delete--btn { color: #ff5049; } .item__delete { float: left; } .item__delete--btn { font-size: 22px; background: none; border: none; cursor: pointer; display: inline-block; vertical-align: middle; line-height: 1; display: none; } .item__delete--btn:focus { outline: none; } .item__delete--btn:active { transform: translateY(2px); } .item:hover .item__delete--btn { display: block; } .item:hover .item__value { transform: translateX(-20px); } .item:hover .item__percentage { transform: translateX(-20px); } .unpaid { background-color: #ffdad9 !important; cursor: pointer; color: #ff5049; } .unpaid .item__percentage { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1); } .unpaid:hover .item__description { font-weight: 900; } .error { display: none; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600" rel="stylesheet" type="text/css" /> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" /> <link type="text/css" rel="stylesheet" href="style.css" /> <title>Budgety</title> </head> <body> <div class="top"> <div class="budget"> <div class="budget__title"> Available Budget in <span class="budget__title--month">%Month%</span>: </div> <div class="budget__value">0.00</div> <div class="budget__income clearfix"> <div class="budget__income--text">Income</div> <div class="right"> <div class="budget__income--value">+ 0.00</div> <div class="budget__income--percentage">&nbsp;</div> </div> </div> <div class="budget__expenses clearfix"> <div class="budget__expenses--text">Expenses</div> <div class="right clearfix"> <div class="budget__expenses--value">- 0.00</div> <div class="budget__expenses--percentage">0.00%</div> </div> </div> </div> </div> <div class="bottom"> <div class="add"> <div class="add__container"> <select class="add__type"> <option value="inc" selected>+</option> <option value="exp">-</option> </select> <input type="text" class="add__description" placeholder="Add description" /> <input type="number" class="add__value" placeholder="Value" /> <button class="add__btn"> <i class="ion-ios-checkmark-outline"></i> </button> </div> </div> <div class="error">Vaalue can be positive number only.</div> <div class="container clearfix"> <div class="income"> <h2 class="icome__title">Income</h2> <div class="income_list"> <!-- <div class="item clearfix" id="income-0"> <div class="item__description">Salary</div> <div class="right clearfix"> <div class="item__value">+ 2,100.00</div> <div class="item__delete"> <button class="item__delete--btn"> <i class="ion-ios-close-outline"></i> </button> </div> </div> </div> <div class="item clearfix" id="income-1"> <div class="item__description">Sold car</div> <div class="right clearfix"> <div class="item__value">+ 1,500.00</div> <div class="item__delete"> <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> --> </div> </div> <div class="expenses"> <h2 class="expenses__title">Expenses</h2> <div class="expenses__list"> <!-- <div class="item clearfix" id="expense-0"> <div class="item__description">Apartment rent</div> <div class="right clearfix"> <div class="item__value">- 900.00</div> <div class="item__percentage">21%</div> <div class="item__delete"> <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> <div class="item clearfix" id="expense-1"> <div class="item__description">Grocery shopping</div> <div class="right clearfix"> <div class="item__value">- 435.28</div> <div class="item__percentage">10%</div> <div class="item__delete"> <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> --> </div> </div> </div> </div> <script src="app.js"></script> </body> </html> 

Answer 1

（首先我的英語不好。如果我的答案不清楚，請提前抱歉）我可以看到問題出在刪除按鈕上。 在刪除按鈕內，您有icon 。 如果單擊刪除按鈕時刪除按鈕很小或圖標很大，則事件會觸發圖標，因為圖標位於按鈕頂部。 因此，您要檢查的類位於父節點中。 正如我所使用的那樣，您也可以使用e.target.parentNode.classList檢查父節點。 如果答案不明確，請詢問任何問題。 謝謝

 let submit = document.querySelector('.add__btn') let money = document.querySelector('.add .add__value') let errorMessage = document.querySelector('.error') let enteredValue = 0; let descripetion = document.querySelector('.add__description'); let enteredDescription; let selector = document.querySelector('.add__type'); let incomeObjects = [] let income = document.createElement('LI'); let expenseObjects = [] let incomeIndex = 0; let expenseIndex = 0; const incomeList = document.querySelector('.income_list'); const expenseList = document.querySelector('.expenses__title'); function reset() { errorMessage.style.display = 'none'; } class Budget { constructor(description, value) { this.description = description; this.value = value; } } function addElement(value) { let table; let parentDiv = document.createElement('DIV'); let newDivLeft = document.createElement('DIV'); let newDivRight = document.createElement('DIV'); let newDivDelete = document.createElement('BUTTON'); if (value === 'inc') { table = document.querySelector('.income_list'); newDivDelete.setAttribute('class', 'list'); parentDiv.setAttribute('id', `income-${incomeIndex}`); newDivDelete.setAttribute('data-btn', `${incomeIndex}`); newDivLeft.innerHTML = `${incomeObjects[incomeIndex].description}`; newDivRight.innerHTML = `${incomeObjects[incomeIndex].value}CA$`; } else { table = document.querySelector('.expenses__list'); newDivDelete.setAttribute('class', 'list'); parentDiv.setAttribute('id', `income-${expenseIndex}`); newDivDelete.setAttribute('data-btn', `${expenseIndex}`); newDivLeft.innerHTML = `${expenseObjects[expenseIndex].description}`; newDivRight.innerHTML = `${expenseObjects[expenseIndex].value}CA$`; } parentDiv.style.display = 'flex' parentDiv.style.justifyContent = 'space-between' newDivLeft.style.display = 'inline'; newDivRight.style.display = 'inline'; newDivDelete.innerHTML = '<i class="fas fa-trash-alt"></i>' parentDiv.appendChild(newDivLeft); parentDiv.appendChild(newDivRight); parentDiv.appendChild(newDivDelete); table.appendChild(parentDiv); } submit.addEventListener('click', function (e) { if (e.target.nodeName === 'I' && selector.value === 'inc' && money.value !== '' && descripetion.value !== '') { reset(); if (money.value < 0) { errorMessage.style.display = 'block'; } else { enteredValue = money.value; enteredDescription = descripetion.value; incomeObjects.push(new Budget(enteredDescription, enteredValue)); addElement(selector.value); incomeIndex++ } } else if (e.target.nodeName === 'I' && selector.value === 'exp' && money.value !== '' && descripetion.value !== '') { reset(); if (money.value < 0) { errorMessage.style.display = 'block'; } else { enteredValue = money.value; enteredDescription = descripetion.value; expenseObjects.push(new Budget(enteredDescription, enteredValue)); addElement(selector.value); expenseIndex++ } } money.value = ''; descripetion.value = ''; }) incomeList.addEventListener('click', function (e) { console.log('I am here : event : ' + e.target.classList); console.log('I am here : parent : ' + e.target.parentNode.classList.contains('list')); if ( e.target.classList.contains('list') || e.target.parentNode.classList.contains('list') ) { let data = e.target.dataset.btn; let removeElement = document.querySelector(`#income-${data}`) removeElement.remove(); } }) 

 /********************************************** *** GENERAL **********************************************/ * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; display: table; clear: both; } body { color: #555; font-family: Open Sans; font-size: 16px; position: relative; height: 100vh; font-weight: 400; } .right { float: right; } .red { color: #ff5049 !important; } .red-focus:focus { border: 1px solid #ff5049 !important; } /********************************************** *** TOP PART **********************************************/ .top { height: 40vh; background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(https://practice-project.niziol.ca/back.png); background-size: cover; background-position: center; position: relative; } .budget { position: absolute; width: 350px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .budget__title { font-size: 18px; text-align: center; margin-bottom: 10px; font-weight: 300; } .budget__value { font-weight: 300; font-size: 46px; text-align: center; margin-bottom: 25px; letter-spacing: 2px; } .budget__income, .budget__expenses { padding: 12px; text-transform: uppercase; } .budget__income { margin-bottom: 10px; background-color: #28b9b5; } .budget__expenses { background-color: #ff5049; } .budget__income--text, .budget__expenses--text { float: left; font-size: 13px; color: #444; margin-top: 2px; } .budget__income--value, .budget__expenses--value { letter-spacing: 1px; float: left; } .budget__income--percentage, .budget__expenses--percentage { float: left; width: 34px; font-size: 11px; padding: 3px 0; margin-left: 10px; } .budget__expenses--percentage { background-color: rgba(255, 255, 255, 0.2); text-align: center; border-radius: 3px; } /********************************************** *** BOTTOM PART **********************************************/ /***** FORM *****/ .add { padding: 14px; border-bottom: 1px solid #e7e7e7; background-color: #f7f7f7; text-align: center; } .error { margin: auto; display: inline-block; margin-top: 20px; background-color: #ffcdcd; border: 3px solid #c91212; padding: 10px; color: #c91212; border-radius: 5px; } .add__container { margin: 0 auto; text-align: center; } .add__type { width: 55px; border: 1px solid #e7e7e7; height: 44px; font-size: 18px; color: inherit; background-color: #fff; margin-right: 10px; font-weight: 300; transition: border 0.3s; } .add__description, .add__value { border: 1px solid #e7e7e7; background-color: #fff; color: inherit; font-family: inherit; font-size: 14px; padding: 12px 15px; margin-right: 10px; border-radius: 5px; transition: border 0.3s; } .add__description { width: 400px; } .add__value { width: 100px; } .add__btn { font-size: 35px; background: none; border: none; color: #28b9b5; cursor: pointer; display: inline-block; vertical-align: middle; line-height: 1.1; margin-left: 10px; } .add__btn:active { transform: translateY(2px); } .add__type:focus, .add__description:focus, .add__value:focus { outline: none; border: 1px solid #28b9b5; } .add__btn:focus { outline: none; } /***** LISTS *****/ .container { width: 1000px; margin: 60px auto; } .income { float: left; width: 475px; margin-right: 50px; } .expenses { float: left; width: 475px; } h2 { text-transform: uppercase; font-size: 18px; font-weight: 400; margin-bottom: 15px; } .icome__title { color: #28b9b5; } .expenses__title { color: #ff5049; } .item { padding: 13px; border-bottom: 1px solid #e7e7e7; } .item:first-child { border-top: 1px solid #e7e7e7; } .item:nth-child(even) { background-color: #f7f7f7; } .item__description { float: left; } .item__value { float: left; transition: transform 0.3s; } .item__percentage { float: left; margin-left: 20px; transition: transform 0.3s; font-size: 11px; background-color: #ffdad9; padding: 3px; border-radius: 3px; width: 32px; text-align: center; } .income .item__value, .income .item__delete--btn { color: #28b9b5; } .expenses .item__value, .expenses .item__percentage, .expenses .item__delete--btn { color: #ff5049; } .item__delete { float: left; } .item__delete--btn { font-size: 22px; background: none; border: none; cursor: pointer; display: inline-block; vertical-align: middle; line-height: 1; display: none; } .item__delete--btn:focus { outline: none; } .item__delete--btn:active { transform: translateY(2px); } .item:hover .item__delete--btn { display: block; } .item:hover .item__value { transform: translateX(-20px); } .item:hover .item__percentage { transform: translateX(-20px); } .unpaid { background-color: #ffdad9 !important; cursor: pointer; color: #ff5049; } .unpaid .item__percentage { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1); } .unpaid:hover .item__description { font-weight: 900; } .error { display: none; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600" rel="stylesheet" type="text/css" /> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" /> <link type="text/css" rel="stylesheet" href="style.css" /> <title>Budgety</title> </head> <body> <div class="top"> <div class="budget"> <div class="budget__title"> Available Budget in <span class="budget__title--month">%Month%</span>: </div> <div class="budget__value">0.00</div> <div class="budget__income clearfix"> <div class="budget__income--text">Income</div> <div class="right"> <div class="budget__income--value">+ 0.00</div> <div class="budget__income--percentage">&nbsp;</div> </div> </div> <div class="budget__expenses clearfix"> <div class="budget__expenses--text">Expenses</div> <div class="right clearfix"> <div class="budget__expenses--value">- 0.00</div> <div class="budget__expenses--percentage">0.00%</div> </div> </div> </div> </div> <div class="bottom"> <div class="add"> <div class="add__container"> <select class="add__type"> <option value="inc" selected>+</option> <option value="exp">-</option> </select> <input type="text" class="add__description" placeholder="Add description" /> <input type="number" class="add__value" placeholder="Value" /> <button class="add__btn"> <i class="ion-ios-checkmark-outline"></i> </button> </div> </div> <div class="error">Vaalue can be positive number only.</div> <div class="container clearfix"> <div class="income"> <h2 class="icome__title">Income</h2> <div class="income_list"> <!-- <div class="item clearfix" id="income-0"> <div class="item__description">Salary</div> <div class="right clearfix"> <div class="item__value">+ 2,100.00</div> <div class="item__delete"> <button class="item__delete--btn"> <i class="ion-ios-close-outline"></i> </button> </div> </div> </div> <div class="item clearfix" id="income-1"> <div class="item__description">Sold car</div> <div class="right clearfix"> <div class="item__value">+ 1,500.00</div> <div class="item__delete"> <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> --> </div> </div> <div class="expenses"> <h2 class="expenses__title">Expenses</h2> <div class="expenses__list"> <!-- <div class="item clearfix" id="expense-0"> <div class="item__description">Apartment rent</div> <div class="right clearfix"> <div class="item__value">- 900.00</div> <div class="item__percentage">21%</div> <div class="item__delete"> <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> <div class="item clearfix" id="expense-1"> <div class="item__description">Grocery shopping</div> <div class="right clearfix"> <div class="item__value">- 435.28</div> <div class="item__percentage">10%</div> <div class="item__delete"> <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button> </div> </div> </div> --> </div> </div> </div> </div> <script src="app.js"></script> </body> </html>