remove clicked word from textarea with vanila js

user_17958436 0
Viewed 59

i try to remove x item each time i click on "item name x" i came with folowing code but this just remove every item added by click no matter if matches.

As basic code with 'item name x' instead of 'r.innerHTML' works fine but only for elements that are already there and not for items added by click.

However, i want to make it functional for every item added by click, one by one for each click.

<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>

javascript
1 Answers

I found your code difficult to understand, i wrote from scratch, check if this suits your needs:

<!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>
user_192235860
Related