为什么我的 if 条件在事件侦听器中无法正常工作？

Question

在incomeList 上的事件侦听器的这段代码中，存在if 条件。有时即使它为真，这个 if 条件也不会被执行。大多是在刷新页面后执行，之后不执行。

我正在创建预算代码，并通过创建一个 div 来添加收入和支出，在这个 div 中，我正在添加带有类名列表和数据属性的删除按钮。并将整个 div 推入收入的父 div。我也在向父 div 添加数据属性。

而且我想让那些添加的 div 可以在用户点击删除按钮时删除。

但每当我试图通过匹配其数据属性来删除整个父 div 以删除按钮数据值时。 incomeList 事件侦听器中的 if 条件随机执行一次，并且仅删除整个 div 一次。我检查了 class liston 按钮，并且在 incomeList 事件侦听器中仍然存在我的 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>