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>

Answer 1

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>

Answer 2

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();
}

Answer 3

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>

How to add and delete object in javascript?

Question

3 answers

solution1
2 ACCPTED 2016-02-24 10:51:44

Snippet

solution2
1 2016-02-24 10:47:39

solution3
1 2016-02-24 12:36:13

How to add and delete object in javascript?

Question

3 answers

solution1 2 ACCPTED 2016-02-24 10:51:44

Snippet

solution2 1 2016-02-24 10:47:39

solution3 1 2016-02-24 12:36:13

solution1
2 ACCPTED 2016-02-24 10:51:44

solution2
1 2016-02-24 10:47:39

solution3
1 2016-02-24 12:36:13