使用 vanila js 從 textarea 中刪除點擊的單詞

Question

每次單擊“項目名稱 x”時，我都會嘗試刪除 x 項目，我附帶以下代碼，但這只是刪除通過單擊添加的每個項目，無論是否匹配。

由於使用“項目名稱 x”而不是“r.innerHTML”的基本代碼可以正常工作，但僅適用於已經存在的元素，而不適用於通過單擊添加的項目。

但是，我想讓它對通過單擊添加的每個項目起作用，每次單擊一個一個。

 <html> <textarea id="cartlist"> item name 4 item name 4 </textarea > <br /> <div class="itm"><a href="#" data-item="1" id="it">item name 4</a><p>add item name 4</p></div> <div class="itm"><a href="#" data-item="1" id="it">item name 3</a><p>add item name 3</p></div> <br><br> remove:<a href="#" class='toBeRemoved' onclick="removeOnlyThis()"> item name 4</a> remove:<a href="#" class='toBeRemoved' onclick="removeOnlyThis()"> item name 3</a> <br><br> <a href="#" class="remove" onclick="eraseText();">remove all</a> </html> <style> #cartlist { width: 100%; height: 100px; } p{ position:absolute; top:-15px; z-index:-1; text-decoration:underline; } .itm{ position:relative; height:20px; color:green;} #it{opacity:0; width:110px; background:pink; position:absolute; } body{ background:#111; } </style> <script> var cartlist = document.querySelector('#cartlist'); var items = document.querySelectorAll('[data-item]'); [].forEach.call(items, function(item) { item.addEventListener('click', function(){ ta.value += "\n" + item.innerHTML; }); }); function eraseText() { document.getElementById("cartlist").value = ""; } var ta = document.querySelector("#cartlist"); var r = document.querySelectorAll('.toBeRemoved') for (var i = 0; i < r.length; i ++) { var id = (r[i].innerHTML); } var lines = ta.value.split(/\n/g); function removeOnlyThis(){ for (var i = 0; i < lines.length; i ++) { if (lines[i].indexOf(id) > -1) { lines.splice(i, 1); } } ta.value = lines.join('\n'); } </script>

Answer 1

我發現您的代碼難以理解，我從頭開始編寫，檢查這是否適合您的需求：

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <textarea id="cartlist" cols="30" rows="10">
Item 4
Item 4
</textarea
    >
    <br />
    <br />

    <button onclick="addItem(this)" data-val="Item 1">Add Item 1</button>
    <button onclick="addItem(this)" data-val="Item 2">Add Item 2</button>
    <button onclick="addItem(this)" data-val="Item 3">Add Item 3</button>
    <button onclick="addItem(this)" data-val="Item 4">Add Item 4</button>
    <br />
    <br />

    <button onclick="removeItem(this)" data-val="Item 1">Remove Item 1</button>
    <button onclick="removeItem(this)" data-val="Item 2">Remove Item 2</button>
    <button onclick="removeItem(this)" data-val="Item 3">Remove Item 3</button>
    <button onclick="removeItem(this)" data-val="Item 4">Remove Item 4</button>
    <br />
    <br />

    <button onclick="removeAll(this)">Remove All</button>
    <br />

    <script>
      let cartlist = document.getElementById("cartlist");

      function addItem(element) {
        cartlist.innerHTML += element.getAttribute("data-val") + "\r\n";
      }

      function removeItem(element) {
        let regex = new RegExp(element.getAttribute("data-val") + "([\r\n]|$)");
        cartlist.innerHTML = cartlist.innerHTML.replace(regex, "");
      }

      function removeAll() {
        cartlist.innerHTML = "";
      }
    </script>
  </body>
</html>

使用 vanila js 從 textarea 中刪除點擊的單詞

問題描述

1 個解決方案

解決方案1
1 已采納 2022-07-10 17:12:59

使用 vanila js 從 textarea 中刪除點擊的單詞

問題描述

1 個解決方案

解決方案1 1 已采納 2022-07-10 17:12:59

解決方案1
1 已采納 2022-07-10 17:12:59