为什么我的if条件无法在侦听器中正常运行？

Question

在此代码中，incomeList上的事件侦听器存在if条件。有时即使条件为真也无法执行。通常，它是在刷新页面之后执行的，而不执行。

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

并且我希望每当用户单击删除按钮时就删除那些添加的div。

但是，每当我尝试通过匹配其data属性以删除按钮数据值来删除整个父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>