主页 / 问题 / 977476
Accepted
Дмитрий Сухоцкий
Asked:2020-05-03 16:36:34 +0800 CST2020-05-03 16:36:34 +0800 CST

删除/添加项目

  • 772

删除复选框后如何正确实现块的删除？为什么删除只对最初创建的块起作用？

var el = document.querySelectorAll(".input__td");
let block = document.querySelector(".footer__blockPrice");
el.forEach(elem => {
  
  elem.addEventListener("click", () => {
    
    if (elem.checked) {
      
      var div = document.createElement('div');
      div.className = "footer__btn " + elem.id;
      
      div.innerHTML = elem.parentElement.nextElementSibling.innerHTML + "<button class='footer__shutdown'></button>";
      block.appendChild(div);
    } else {

      var divBtn = block.querySelector("." + elem.id);
      block.removeChild(divBtn);
    }
  })
})
    
    
    var delBtn = document.getElementsByClassName("footer__shutdown");
    for (let i = 0; i < delBtn.length; i++) {
      delBtn[i].addEventListener("click", () => {
        delBtn[i].parentElement.remove();
      })
    }
table {
  margin-bottom: 20px;
}

.footer__btn {
  display: inline-block;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 25px;
  border: 0.5px solid black 
}

.footer__shutdown {
  text-align: center;
  width: 30px;
  height: 20px;
  margin-left: 5px;
  cursor: pointer;
}
 <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="checkbox-id-all" /> <label for="checkbox-id"></label></th>
        <th>Номер заказа</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="">
          <input type="checkbox" class="input__td" id="checkbox-id1"  checked/>
          <label for="checkbox-id1"></label>
        </td>
        <td data-label="Номер заказа" class="number">#1 204 888</td>
        <td data-label="Сумма" class="typeWork">19 332₽</td>
      </tr>
      <tr>
        <td data-label="">
          <input type="checkbox" class="input__td" id="checkbox-id1"  />
          <label for="checkbox-id1"></label>
        </td>
        <td data-label="Номер заказа" class="number">#1 204 890</td>
        <td data-label="Сумма" class="typeWork">15 332₽</td>
      </tr>
    </tbody>
  </table>
  
  <div class="balance-footer footer">
    <span class="footer__total">Итого к оплате заказы:</span>
    <div class="footer__blockPrice" id="footer__blockPrice">
      <div class="footer__btn">#1 204 888 <button class="footer__shutdown">X</button></div> 
    </div>
    <div class="footer__price">
      на сумму: <span>____ ₽</span>
      <button class="footer__toPay">Оплатить</button>
    </div>


  </div>

javascript

1 个回答

  1. Best Answer

    我也不得不稍微改变一下标记（添加标识符）

    我添加的内容带有注释：

    let el = document.querySelectorAll(".input__td");
let block = document.querySelector(".footer__blockPrice");
el.forEach(elem => {
  elem.addEventListener("click", () => {
    if (elem.checked) {
      var div = document.createElement('div');
      div.className = "footer__btn";
      div.id = "btn_" + elem.id;
      div.innerHTML = elem.parentElement.nextElementSibling.innerHTML 
                      + "<button class='footer__shutdown'>X</button>";
      block.appendChild(div);
      ////////////////////////////////////////////////////////////////////////////
      let delBtn = div.querySelector('.footer__shutdown');                      //
      div.querySelector('.footer__shutdown').addEventListener("click", () => {  //
          delBtn.parentElement.remove();                                        //
          elem.checked = false;                                                 //
      });                                                                       //
      ////////////////////////////////////////////////////////////////////////////
    } else { 
      ////////////////////////////////////////////////////////////////////////////
      document.querySelector("#btn_" + elem.id).remove();                       //
      ////////////////////////////////////////////////////////////////////////////
    }
  })
})
 
var delBtns = document.getElementsByClassName("footer__shutdown");
for (let i = 0; i < delBtns.length; i++) {
  delBtns[i].addEventListener("click", () => {
    let el = delBtns[i].parentElement;
    //////////////////////////////////////////////////////////////////////////////
    document.querySelector('#' + el.id.split('btn_').pop()).checked = false;    //
    //////////////////////////////////////////////////////////////////////////////
    el.remove();
  });
}

//////////////////////////////////////////////////////////////////////////////
document.querySelector('#checkbox-id-all').onclick = function() {           // 
  document.querySelectorAll('.input__td').forEach(cb => {                   //
    cb.checked !== this.checked && cb.click();                              //
  });                                                                       //
};                                                                          //
//////////////////////////////////////////////////////////////////////////////
    table {
  margin-bottom: 20px;
}

.footer__btn {
  display: inline-block;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 25px;
  border: 0.5px solid black 
}

.footer__shutdown {
  text-align: center;
  width: 30px;
  height: 20px;
  margin-left: 5px;
  cursor: pointer;
}
    <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="checkbox-id-all" /> <label for="checkbox-id"></label></th>
        <th>Номер заказа</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="">
          <input type="checkbox" class="input__td" id="checkbox-id1"  checked/>
          <label for="checkbox-id1"></label>
        </td>
        <td data-label="Номер заказа" class="number">#1 204 888</td>
        <td data-label="Сумма" class="typeWork">19 332₽</td>
      </tr>
      <tr>
        <td data-label="">
          <input type="checkbox" class="input__td" id="checkbox-id2"  />
          <label for="checkbox-id1"></label>
        </td>
        <td data-label="Номер заказа" class="number">#1 204 890</td>
        <td data-label="Сумма" class="typeWork">15 332₽</td>
      </tr>
    </tbody>
  </table>
  
  <div class="balance-footer footer">
    <span class="footer__total">Итого к оплате заказы:</span>
    <div class="footer__blockPrice" id="footer__blockPrice">
      <div class="footer__btn" id="btn_checkbox-id1">#1 204 888 <button class="footer__shutdown">X</button></div> 
    </div>
    <div class="footer__price">
      на сумму: <span>____ ₽</span>
      <button class="footer__toPay">Оплатить</button>
    </div>


  </div>

    • 2

相关问题