How to add and delete object in javascript?

Question

I have order list in HTML :

<ol id="myList">
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ol>

<button onclick="myFunction()">Try it</button>

And Ii write code in Javascript, and now I can add one item in this list. I have also set up limit of adding items. When I add one items, then how can I delete it?

<script>
    var limit = 1
    var currentAmount = 0;
    function myFunction() {

        //Check we haven't reached our limit.
        if(currentAmount < limit){
            var x = document.createElement("li");
            var t = document.createTextNode("Coffee");
            x.appendChild(t);
            document.getElementById("myList").appendChild(x);
            currentAmount++; //Increment our count
        }

    }
</script>

Basically the opposite of appendChild: removeChild developer.mozilla.org/en-US/docs/Web/API/Node/removeChild — Marc
– Marc, Commented Feb 24, 2016 at 10:42
Add a button to each row and then remove the node with element.remove() — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Feb 24, 2016 at 10:43
If you want to make it happen only for once then remove onclick attribute once element is added.... — Rayon
– Rayon, Commented Feb 24, 2016 at 10:50

Zakaria Acharki · Accepted Answer · 2016-02-24 11:09:14Z

You could add remove button to every item in the list and attach onclick event to it that will call removeItem() function, check example below.

Hope this helps.

Snippet

var limit = 1
var currentAmount = 0;
function myFunction() {

  //Check we haven't reached our limit.
  if(currentAmount < limit){
    var x = document.createElement("li");

    var remove_btn = document.createElement("input");
    remove_btn.setAttribute("type", "button");
    remove_btn.setAttribute("value", "X");
    remove_btn.setAttribute("onclick", "removeItem(this)");

    x.appendChild(remove_btn);

    var t = document.createTextNode("Coffee");
    x.appendChild(t);

    document.getElementById("myList").appendChild(x);
    currentAmount++; //Increment our count
  }

}

function removeItem() {
     event.target.parentNode.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="myList">
  <li><button onclick="removeItem(this)">X</button> Tea</li>
  <li><button onclick="removeItem(this)">X</button> Milk</li>
  <li><button onclick="removeItem(this)">X</button> Water</li>
</ol>

<button onclick="myFunction()">Try it</button>

voltrevo · Accepted Answer · 2016-02-24 10:47:39Z

1

Well, it depends which element you want to remove, but for example, to remove the last element, add this button:

<button onClick="removeItem();">Now try this</button>

and this script:

function removeItem() {
    document.getElementById("myList").lastChild.remove();
}

answered Feb 24, 2016 at 10:47

voltrevo

10.5k3 gold badges34 silver badges33 bronze badges

Comments

zer00ne · Accepted Answer · 2016-02-24 12:36:13Z

Got carried away, it removes items as OP requested and it:

Generates the delete button for every list item.
Added delete buttons for the old list items.
Added a text input so the user can input the list items.
Added an eventListener to the list in order to handle which button was clicked and save memory having one eventListener instead of one for each button.

Snippet

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Shopping List</title>
  <style>
    #inp1 {
      margin: 10px 15px;
      width: 25ex;
    }
    .item {
      max-width: 30ex;
      position: relative;
    }
    .del {
      line-height: 1;
      width: 7ex;
      margin: 0 20px;
      padding: 0 3px;
      position: absolute;
      right: -10px;
    }
    .del:before {
      content: 'Delete';
      font: inherit;
    }
  </style>
</head>

<body>
  <h2>Shopping List</h2>
  <ol id="list">
    <li class="item">Tea
      <button class="del"></button>
    </li>
    <li class="item">Milk
      <button class="del"></button>
    </li>
    <li class="item">Water
      <button class="del"></button>
    </li>
  </ol>

  <input id="inp1" name="inp1" placeholder="Grocery Item" />
  <button onclick="list(inp1.value)">Add</button>
  <script>
    var limit = 6
    var currentAmount = 3;
    var ol = document.getElementById("list");

    function list(item) {

      //Check we haven't reached our limit.
      if (currentAmount < limit) {
        var li = document.createElement("li");
        var str = document.createTextNode(item);
        var btn = document.createElement('button');
        li.appendChild(str);
        li.appendChild(btn);
        li.classList.add('item');
        btn.classList.add('del');
        ol.appendChild(li);
        currentAmount++; //Increment our count
      }
      return false;
    }

    ol.addEventListener('click', function(event) {
      if (event.target != event.curentTarget) {
        var tgt = event.target;
        var li = tgt.parentElement;
        ol.removeChild(li);
        currentAmount--;
      }
      event.stopPropagation();
    }, false);
  </script>
</body>

</html>

Collectives™ on Stack Overflow

How to add and delete object in javascript?

3 Answers 3

Snippet

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Snippet

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related