亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在單擊按鈕時刪除特定數量的 DOM 元素?

如何在單擊按鈕時刪除特定數量的 DOM 元素?

拉丁的傳說 2023-04-01 16:10:44
我想弄清楚如何在單擊按鈕時刪除按鈕上方最近的四個 div 元素(連同包含按鈕的 div)。我一直在嘗試使用.closest(),但運氣不佳。我將始終刪除按鈕本身以及 DOM 順序中按鈕上方的四個元素。下面有多組帶有 div 的行,所以我不能單獨按類選擇這些元素。示例 HTML://Row 1<div class="col-2 selectedRow">014</div><div class="col-4 selectedRow">Test</div><div class="col-2 selectedRow">Special Charge</div><div class="col-2 selectedRow">012</div><div class="col-2 selectedRow"><input type="button" class="removeCode" value="Remove"></div>//Row 2<div class="col-2 selectedRow">012</div><div class="col-4 selectedRow">Test 2</div><div class="col-2 selectedRow">Other Charge</div><div class="col-2 selectedRow">011</div><div class="col-2 selectedRow"><input type="button" class="removeCode" value="Remove"></div>Java腳本:$("form").on('click', '.removeCode', function (event) {    //Remove the current div container, and the 4 divs above that element in the DOM order.});
查看完整描述

1 回答

?
largeQ

TA貢獻2039條經驗 獲得超8個贊

您需要對 HTML 文件進行更改,例如:

  1. input將您的元素替換為button并應用與 wrapper 相同的樣式div。

  2. 將單個行包圍在容器中

  3. 單擊時刪除單擊按鈕的容器

例如:

$("form .removeCode").click(function(event) {

  $(this).parent(".container").remove();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

  <div class="container">

    <div class="col-2 selectedRow">014</div>

    <div class="col-4 selectedRow">Test</div>

    <div class="col-2 selectedRow">Special Charge</div>

    <div class="col-2 selectedRow">012</div>

    <button type="button" class="col-2 selectedRow removeCode">Remove</button>

  </div>

  </div>


  <div class="container">

    <div class="col-2 selectedRow">012</div>

    <div class="col-4 selectedRow">Test 2</div>

    <div class="col-2 selectedRow">Other Charge</div>

    <div class="col-2 selectedRow">011</div>

    <button type="button" class="col-2 selectedRow removeCode">Remove</button>

  </div>

</form>


查看完整回答
反對 回復 2023-04-01
  • 1 回答
  • 0 關注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號