iT邦幫忙

2

如何抓取當下點擊元素的 index 值

codepen:
https://codepen.io/UHU/pen/dyyOxaa
這是 js30 day15 的練習,但我想增加刪除項目的功能上去
當點擊 remove button 時可以把 按鈕外的整個 li 元素刪除掉

嘗試過:

 let listNum  = document.getElementsByTagName("li");
  console.log(listNum.length); // 能抓出當下總共有幾個項目

但卡在點擊按鈕時 不知道要如何抓取當下按鈕的 index 值
同時也因為把 e.target 指定給按鈕的緣故
所以抓出按鈕的 nodeList 再 forEach 綁定點擊事件的話又會變成要點擊多次才會執行

謝謝

2 個回答

3
dragonH
iT邦超人 7 級 ‧ 2019-10-21 18:34:49
最佳解答

我沒有細看

不過你可以在 li 補上 id

然後用這樣刪除

  const id = e.target.id.replace('btn', '');
  document.getElementById(`item${id}`).remove();

codepen

localStorage 就交給你處理了 /images/emoticon/emoticon12.gif

dc88 iT邦新手 5 級 ‧ 2019-10-21 23:57:57 檢舉

感謝大大精闢的解法!
沒想到直接繞過讓我卡住的難題XD

dragonH iT邦超人 7 級 ‧ 2019-10-22 09:10:38 檢舉

/images/emoticon/emoticon42.gif

dc88 iT邦新手 5 級 ‧ 2019-11-15 18:46:29 檢舉

/images/emoticon/emoticon41.gif

0
froce
iT邦大師 2 級 ‧ 2019-10-23 07:52:56

提供另外的解法,不用加id。
不過在ie下不用babel的話我會用D大的用法。

let btns = document.getElementsByTagName("button")
  Array.from(btns).map(btn => {
    btn.addEventListener("click", function(){
      this.parentNode.remove()
    })
  })

https://jsbin.com/havunetoqu/2/edit?html,output

dc88 iT邦新手 5 級 ‧ 2019-11-15 18:47:56 檢舉

謝謝大大提供另一種思考方式
我找機會再研究一下!/images/emoticon/emoticon62.gif

我要發表回答

立即登入回答