adding a delete button using javascript in my existing list in html

Question

I want to add a function in javascript that add a delete button next to a new item which is added to my list also I want the delete button to appear next to my existing list item which I created in my html and when I press the delete button it it deletes that item in the list.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

JS

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

yeah, show how you have done it so anyone can suggest in the way you have done... — Rohit Ambre, Jun 28 '20 at 07:21
added the images of my code I haven't added the delete function yet I can't figure out what to add in the delete function — bikashroy, Jun 28 '20 at 07:32
Please add the code here, instead of sharing the images, it will be easier to help. — Nishant, Jun 28 '20 at 07:54

score 0 · Answer 1 · answered Jun 28 '20 at 09:07

0

You could do it similarly to this way:

HTML:

<ul>
        <li class="bold red" random="23">Notebook</li>
        <li id=li1>Jello <input id='btn1' type="submit" value='-'></input></li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
</ul>

Javascript:

var btn = document.getElementById('btn1');
btn.onclick = function () {
    document.getElementById('li1').remove();
    this.remove();
};

You can play with the example:

https://jsfiddle.net/be4psyrL/

answered Jun 28 '20 at 09:07

lnjuanj

1,744
1
12
23

I want to add a delete button next to each list item – bikashroy Jun 28 '20 at 12:39
Then I think you can easily get that done with this: https://stackoverflow.com/questions/15650131/creating-an-element-that-can-remove-it-self – lnjuanj Jun 29 '20 at 06:10

score 0 · Accepted Answer · answered Jun 29 '20 at 06:06

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var shoppingListItems = ["Notebook", "Jello", "Spinach", "Rice", "Birthday Cake", "Candles"]

function inputLength() {
  return input.value.length;
}

function createListElement(text, index) {
  var li = document.createElement("li");
  var deleteBtn = document.createElement("button");

  deleteBtn.itemId = index
  deleteBtn.onclick = deleteItem.bind(null, index)
  deleteBtn.appendChild(document.createTextNode("Delete"))

  li.appendChild(document.createTextNode(text));
  li.appendChild(deleteBtn);

  ul.appendChild(li);
}

function addListAfterClick() {
    if (inputLength() > 0) {
        shoppingListItems.push(input.value)
      createListElement(input.value, shoppingListItems.length - 1);
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
      shoppingListItems.push(input.value)
      createListElement(input.value, shoppingListItems.length - 1);
    }
}

function deleteItem(itemId) {
  var itemXpath = "//li[text()='"+shoppingListItems[itemId]+ "']";
    var item = document.evaluate(itemXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  item.remove();
}

function initPage() {
  shoppingListItems.forEach(function(element, index) {
    createListElement(element, index)
  })
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
window.onload = initPage;

<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul></ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

adding a delete button using javascript in my existing list in html

2 Answers2