RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 977476
Accepted
Дмитрий Сухоцкий
Дмитрий Сухоцкий
Asked:2020-05-03 16:36:34 +0000 UTC2020-05-03 16:36:34 +0000 UTC 2020-05-03 16:36:34 +0000 UTC

删除/添加项目

  • 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 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Stranger in the Q
    2020-05-03T17:58:07Z2020-05-03T17:58:07Z

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

    我添加的内容带有注释:

    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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    根据浏览器窗口的大小调整背景图案的大小

    • 2 个回答
  • Marko Smith

    理解for循环的执行逻辑

    • 1 个回答
  • Marko Smith

    复制动态数组时出错(C++)

    • 1 个回答
  • Marko Smith

    Or and If,elif,else 构造[重复]

    • 1 个回答
  • Marko Smith

    如何构建支持 x64 的 APK

    • 1 个回答
  • Marko Smith

    如何使按钮的输入宽度?

    • 2 个回答
  • Marko Smith

    如何显示对象变量的名称?

    • 3 个回答
  • Marko Smith

    如何循环一个函数?

    • 1 个回答
  • Marko Smith

    LOWORD 宏有什么作用?

    • 2 个回答
  • Marko Smith

    从字符串的开头删除直到并包括一个字符

    • 2 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5