create a delete button for a li in javascript

create a delete button for a li in javascript - javascript

I created a list to add items to it, however, I'm also trying to add a delete button to remove any Item that's being added to my list, but I can't get it to work,
see snippet below
const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");
form.addEventListener("submit", (e) => {
e.preventDefault();
const item = fruitName.value;
const numOfItmes = qty.value;
const newLi = document.createElement("li");
newLi.innerText = `${numOfItmes} ${item}`;
list.appendChild(newLi);
button.addEventListener("click", () => {
const button = document.createElement("button");
button.textContent = "X";
li.appendChild(button);
});
form.qty.value = "";
form.fruitName.value = "";
});
button {
width: 100px;
height: 100px;
margin: 20px;
}
#fruit {
width: auto;
height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="color.css" />
<title>Document</title>
</head>
<body>
<h1>Welcome!</h1>
<form action="test">
<label for="item">Enter Product</label>
<input type="text" id="fruitName" />
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty" />
<button id="fruit">Submit</button>
</form>
<ul id="list"></ul>
<script src="color.js"></script>
</body>
</html>
I created a list to add items to it, however, I'm also trying to add a delete button to remove any Item that's being added to my list, but I can't get it to work,
see my code below
const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");
form.addEventListener("submit", (e) => {
e.preventDefault();
const item = fruitName.value;
const numOfItmes = qty.value;
const newLi = document.createElement("li");
newLi.innerText = `${numOfItmes} ${item}`;
list.appendChild(newLi);
button.addEventListener("click", () => {
const button = document.createElement("button");
button.textContent = "X";
li.appendChild(button);
});
form.qty.value = "";
form.fruitName.value = "";
});
<h1>Welcome!</h1>
<form action="test">
<label for="item">Enter Product</label>
<input type="text" id="fruitName" />
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty" />
<button id="fruit">Submit</button>
</form>
<ul id="list"></ul>
can anyone help me with this?

You were creating the li's child button element in the wrong place, and you weren't removing the li at all when it was clicked. Here's the working code:
const form = document.querySelector("form");
const product = document.querySelector("#fruitName");
const quantity = document.querySelector("#qty");
const list = document.querySelector("#list");
form.addEventListener("submit", (e) => {
e.preventDefault();
const item = fruitName.value;
const numOfItmes = qty.value;
const newLi = document.createElement("li");
newLi.innerText = `${numOfItmes} ${item}`;
list.appendChild(newLi);
// create button outside of event listener
const button = document.createElement("button");
button.textContent = "X";
newLi.appendChild(button);
// remove the created li element when button is clicked
button.addEventListener("click", () => {
newLi.remove();
});
form.qty.value = "";
form.fruitName.value = "";
});
<h1>Welcome!</h1>
<form action="test">
<label for="item">Enter Product</label>
<input type="text" id="fruitName" />
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty" />
<button id="fruit">Submit</button>
</form>
<ul id="list"></ul>

Related

When new element is added, the status property of all old elements are updated to the new element's, JAVASCRIPT

I have the following function to determine the status of whether a book was read or not in my project each time a new book is added to the library. The issue I am running into is that every time I add a new book, all the books "Status" are updated to the status of the new book.
PROBLEM CODE
const titleInput = document.querySelector('#title');
const authorInput = document.querySelector('#author');
const pagesInput = document.querySelector('#pages');
const genreInput = document.querySelector('#genre');
let readInput;
function readStatus() {
const readRadioBtn = document.querySelector('input[name="read"]');
if (readRadioBtn.checked) {
return 'read';
}
return 'unread';
}
// function to add book to myLibrary array//
function addBook() {
const newBook = new Book(
titleInput.value,
authorInput.value,
pagesInput.value,
genreInput.value,
readInput = readStatus()
);
myLibrary.push(newBook);
}
I have tried to declare the readInput variable inside addBook() before newBook, but then a new book card does not get added at all. The form gets reset upon submission as well. I am attaching my full HTML and JavaScript code below for more clarity on what I am trying to get done. I apologize if it is unorganized as I am still new to coding. I also really appreciate any advice and tips on how I can structure and write my code better.
CODE
// OPENING AND CLOSING MODAL//
const addBookBtn = document.querySelector('.add');
const closeModalBtn = document.querySelector('.close-btn');
const overlay = document.querySelector('.overlay');
const modal = document.querySelector('.modal');
function openModal() {
modal.classList.add('active');
overlay.classList.add('active');
}
function closeModal() {
modal.classList.remove('active');
overlay.classList.remove('active');
}
addBookBtn.addEventListener('click', () => {
openModal();
});
closeModalBtn.addEventListener('click', () => {
closeModal();
});
// CREATING NEW BOOK CARDS//
const myLibrary = [];
// constructor function//
function Book(title, author, pages, genre, read) {
(this.title = title),
(this.author = author),
(this.pages = pages),
(this.genre = genre),
(this.read = read);
}
// need to fix//
function readStatus() {
if (document.querySelector('input[name="read"]').value === 'yes') {
return 'read';
}
if (document.querySelector('input[name="read"]').value === 'no') {
return 'unread';
}
}
const titleInput = document.querySelector('#title');
const authorInput = document.querySelector('#author');
const pagesInput = document.querySelector('#pages');
const genreInput = document.querySelector('#genre');
let readInput;
// function to add book to myLibrary array//
function addBook() {
readInput = readStatus();
const newBook = new Book(
titleInput.value,
authorInput.value,
pagesInput.value,
genreInput.value,
readInput
);
myLibrary.push(newBook);
}
// creates new book card elements in DOM//
function createNewCard(book) {
const cardContainer = document.querySelector('.card-cont');
const cards = document.createElement('div');
cards.classList.add('book-card');
const title = document.createElement('p');
title.innerText = book.title;
cards.appendChild(title);
const author = document.createElement('p');
author.innerText = book.author;
cards.appendChild(author);
const pages = document.createElement('p');
pages.innerText = `${book.pages} pages`;
cards.appendChild(pages);
const genre = document.createElement('p');
genre.innerText = book.genre;
cards.appendChild(genre);
const statusContainer = document.createElement('div');
statusContainer.setAttribute('class', 'read-status');
const statusLabel = document.createElement('p');
statusLabel.innerText = 'Status:';
statusContainer.appendChild(statusLabel);
const statusButton = document.createElement('button');
statusButton.setAttribute('class', 'read-unread');
if (readInput === 'read') {
statusButton.innerText = 'Read';
statusButton.classList.add('isRead');
} else {
statusButton.innerText = 'Unread';
statusButton.classList.add('notRead');
}
statusContainer.appendChild(statusButton);
cards.appendChild(statusContainer);
const removeBtn = document.createElement('button');
removeBtn.classList.add('remove');
removeBtn.innerText = 'Remove';
cards.appendChild(removeBtn);
cardContainer.appendChild(cards);
}
function publishCards() {
const cardContainer = document.querySelector('.card-cont');
const cards = document.querySelectorAll('.book-card');
cards.forEach((card) => cardContainer.removeChild(card));
for (let i = 0; i < myLibrary.length; i++) {
createNewCard(myLibrary[i]);
}
}
const bookForm = document.querySelector('.book-form');
bookForm.addEventListener('submit', (e) => {
e.preventDefault();
closeModal();
addBook();
publishCards();
bookForm.reset();
});
function changeReadStatus() {
if (statusButton.classList.contains('isRead')) {
statusButton.classList.remove('isRead');
statusButton.classList.add('notRead');
statusButton.innerText = 'Unread'
} else {
statusButton.classList.remove('notRead');
statusButton.classList.add('isRead');
statusButton.innerText = 'Read'
}
}
const statusButton = document.querySelector('.read-unread');
statusButton.addEventListener('click', () => {
changeReadStatus();
});
console.log(myLibrary);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="font-awesome-css/fontawesome.css">
<link rel="stylesheet" href="styles.css">
<title>Library Project</title>
</head>
<body>
<header>
<div class="logo">
<i class="fa-solid fa-book"></i>
<h1 class="title"> your libary</h1>
</div>
<button class="sign-in">sign in</button>
</header>
<div class="main">
<button class="add">+ Add Book</button>
<div class="card-cont">
<div class="book-card">
<p>The Cat in the Hat</p>
<p>Dr. Seuss</p>
<p>61 pages</p>
<p>Children's Literature</p>
<div class="read-status">
<p>Status:</p>
<button class="read-unread isRead">Read</button>
</div>
<button class="remove">Remove</button>
</div>
</div>
</div>
<div class="modal">
<form action="#" method="post" class="book-form">
<div class="close-btn-cont">
<button class="close-btn">×</button>
</div>
<h2>What Are You Reading?</h2>
<input type="text" id="title" name="title" placeholder="Title" required>
<input type="text" id="author" name="author" placeholder="Author" required>
<input type="text" id="pages" name="pages" placeholder="# of Pages" pattern="\d+" required>
<input type="text" id="genre" name="genre" placeholder="Genre" required>
<p class="read">Have you read this book?</p>
<div class="radio-cont">
<input type="radio" name="read" id="yes" value="yes" required>
<label for="yes">Yes</label>
<input type="radio" name="read" id="no" value="no" required>
<label for="no">No</label>
</div>
<input type="submit" id="submit" value="Submit">
</form>
</div>
<div class="overlay"></div>
<script src="https://kit.fontawesome.com/817495898e.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

I want to save the data in a textbox created repeatedly in JavaScript using webstorage

this is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CV Information</title>
<link rel="stylesheet" href="StyleSheet1.css" />
</head>
<body>
<header><b>CV Information</b></header>
<!--<script src="Script1.js"></script>-->
<div class="mydiv">
<form action="CV_Viewer.html">
<fieldset id="field">
<div class="scrollable" id="scroll">
<header>Languages</header><br />
<label for="mLan">Your Mothertoungue:</label>
<input type="text" id="mLan" placeholder="Primary Language.." name="name" pattern="[A-Za-z ]{3,}" required><br><br>
<input type="button" id="plus" onclick="addTextBox()" class="plus" value="+ other languages..." name="plus" />
</div>
<div style="position: static">
<input type="submit" onclick="webstorage()" class="hov" style="margin-top:30px" value="Next">
</div>
</fieldset>
</form>
</div>
<footer>
Copyright©2022 Rami Joulani
</footer>
<script>
let b = 1;
let q=0;
const array = [];
function addTextBox() {
b++;
const textBox = document.createElement("INPUT");
textBox.setAttribute("type", "text");
textBox.setAttribute("placeholder", "Any Other Language...");
textBox.setAttribute("pattern", "[A-Za-z ]{3,}");
textBox.setAttribute("style", "margin-top:35px;");
textBox.setAttribute("id",q);
const div = document.getElementById("scroll");
div.appendChild(textBox);
var plus = document.getElementById("plus");
div.insertBefore(textBox, plus);
array[q] = textBox.value;
console.log(array[q]);
q++;
return fieldSet();
}
function fieldSet() {
const radio1 = document.createElement("input");
radio1.setAttribute("type", "radio");
radio1.setAttribute("id", "rad1");
radio1.setAttribute("name", "connected");
const div = document.getElementById("scroll");
var plus = document.getElementById("plus");
div.appendChild(radio1);
div.insertBefore(radio1, plus);
const begg = document.createElement("label");
begg.setAttribute("for", "rad1");
const begginer = document.createTextNode("Begginer");
begg.appendChild(begginer);
div.appendChild(begg);
div.insertBefore(begg, plus);
const radio2 = document.createElement("input");
radio2.setAttribute("type", "radio");
radio2.setAttribute("id", "rad2");
radio2.setAttribute("name", "connected")
div.appendChild(radio2);
div.insertBefore(radio2, plus);
const inter = document.createElement("label");
inter.setAttribute("for", "rad2");
const intermadiate = document.createTextNode("Intermadiate");
inter.appendChild(intermadiate);
div.appendChild(inter);
div.insertBefore(inter, plus);
const radio3 = document.createElement("input");
radio3.setAttribute("type", "radio");
radio3.setAttribute("id", "rad3");
radio3.setAttribute("name", "connected")
div.appendChild(radio3);
div.insertBefore(radio3, plus);
const flu = document.createElement("label");
flu.setAttribute("for", "rad3");
const fluent = document.createTextNode("Fluent");
flu.appendChild(fluent);
div.appendChild(flu);
div.insertBefore(flu, plus);
plus.setAttribute("style", "margin-top:20px;")
if(b==4) {
plus.hidden=true;
}
}
function webstorage() {
localStorage.setItem("mothTong", document.getElementById("mLan").value);
}
</script>
</body>
</html>
I changed it multiple times when I tried to solve it
how can I save textBox value and the radio button values separately though they are created with the same attribute
it might be simple but I just couldn't figure it out.
Don't point out to some missing stuff but if you please tell me how is it possible to do it depending on the general form of the code.

form submitting 0 to database

I have an html form with item and amount entries and I want the values in them to be stored in local storage and xampp, I have succeeded in submiting to localstorage however the form submits nothing in xampp in a column for item and 0 in the column of amount
here is my html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ICT specialists</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="app.css" />
<link rel="shortcut icon" href="ICT_Logo-01.png">
</head>
<body>
<h2>Daily transactions at ICT specialists</h2>
<div class="container">
<h4>Your balance</h4>
<h1 id="balance"></h1>
<div class="inc-exp-container">
<div>
<h4>income</h4>
<p id="money-plus" class="money plus"></p>
</div>
<div>
<h4>expense</h4>
<p id="money-minus" class="money minus"></p>
</div>
</div>
<h3>History</h3>
<div class="shows">
<ion-icon name="menu-outline" id="showLi"></ion-icon>
<ion-icon name="close-outline" id="hideLi"></ion-icon>
</div>
<ul id="list" class="list"></ul>
<h3>add new transation</h3>
<form action="sales.php" method="post" id="form">
<div class="form-control">
<label for="">date</label>
<input type="text" id="date" name="date">
</div>
<div class="form-control">
<label for="text">item</label>
<input type="text" id="text" name="item" placeholder="please enter the item..." autocomplete="off" />
</div>
<div class="form-control">
<label for="amount">amount <br />(negative=expense, positive=income)</label>
<input type="number" id="amount" name="amount" placeholder="please enter the amount..." autocomplete="off" />
</div>
<button class="btn" type="submit">Add transation</button>
</form>
</div>
<div class="footer">
<div class="footerTxt">copyright &copy <span id="dated">2022</span</div>
<div class="footerRyt">
ict specialists | sydotech
</div>
</div>
<style>
.footer{
display: flex;
justify-content: space-evenly;
width: 100%;
bottom: 0;
background: deepskyblue !important;
padding: 10px;
position: fixed;
}
.footer .footerTxt{
font-size: 1.2rem;
text-transform: capitalize;
font-weight: 500;
}
.footer .footerRyt a{
text-decoration: none;
font-size: 1.4rem;
color: #fff !important;
}
</style>
<ion-icon name="arrow-up-outline" id="icons"></ion-icon>
<script src="sales.js"></script>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
here is my php
<?php
$pdo = new PDO('mysql:host=localhost;port=3306;dbname=sales','root','');
$pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
if($_SERVER['REQUEST_METHOD']==='POST'){
$item = $_POST['item'];
$amount = $_POST['amount'];
$statement = $pdo->prepare("insert into transaction
(item,amount)
values (:item,:amount)");
$statement->bindValue(':item', $item );
$statement->bindValue(':amount', $amount );
$statement->execute();
header('Location: sales.html');
}
here is my javascript file
const balance = document.getElementById("balance");
const money_plus = document.getElementById("money-plus");
const list = document.getElementById("list");
const form = document.getElementById("form");
const text = document.getElementById("text");
const amount = document.getElementById("amount");
const money_minus = document.getElementById("money-minus");
let showLi = document.getElementById("showLi");
let hideLi = document.getElementById('hideLi');
const localStorageTransations = JSON.parse(localStorage.getItem("transations"));
let transations =
localStorage.getItem("transations") !== null ? localStorageTransations : [];
//add transation
function addTransation() {
// e.preventDefault();
if (text.value.trim() === "" || amount.value.trim() === "") {
text.placeholder = "PLEASE SOME TEXT";
text.style.backgroundColor = "#ccc";
text.style.fontWeight = 'bold';
amount.placeholder = "ENTER AMOUNT";
amount.style.backgroundColor = "#ccc";
amount.style.fontWeight = 'bold';
} else {
const transation = {
id: genenrateID(),
text: text.value,
amount: +amount.value,
};
transations.push(transation);
addTransationDOM(transation);
updateValues();
updateLocalStorage();
text.value = "";
amount.value = "";
}
}
//generate id
function genenrateID() {
return Math.floor(Math.random() * 100000000);
}
//add transations to dom list
function addTransationDOM(transation) {
//get sign
const sign = transation.amount < 0 ? "-" : "+";
const item = document.createElement("li");
//add class based on value
item.classList.add(transation.amount < 0 ? "minus" : "plus");
item.innerHTML = `${transation.text} <span>${sign}${Math.abs(transation.amount)}</span>
<button class="delete-btn" onclick="removeTransation(${transation.id})">x</button>`;
list.appendChild(item);
item.style.display="none";
hideLi.addEventListener('click',()=>{
item.style.display = 'none';
hideLi.style.display = "none";
showLi.style.display = "block";
});
showLi.addEventListener('click',()=>{
item.style.display = 'block';
hideLi.style.display = "block";
showLi.style.display = "none";
})
}
// ********hide list******
// ********hide list end******
//update the balance
function updateValues() {
const amounts = transations.map((transation) => transation.amount);
const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(0);
const income = amounts
.filter((item) => item > 0)
.reduce((acc, item) => (acc += item), 0)
.toFixed(0);
const expense = (
amounts.filter((item) => item < 0).reduce((acc, item) => (acc += item), 0) * -1).toFixed(0);
balance.innerText = `UgShs: ${total}`;
money_plus.innerText = `UgShs: ${income}`;
money_minus.innerText = `UgShs: ${expense}`;
}
//remove
function removeTransation(id) {
transations = transations.filter((transation) => transation.id !== id);
updateLocalStorage();
init();
}
//updatelocal storage
function updateLocalStorage() {
localStorage.setItem("transations", JSON.stringify(transations));
}
function init() {
list.innerHTML = "";
transations.forEach(addTransationDOM);
updateValues();
}
init();
form.addEventListener("submit", addTransation);
// *********date calculation********
let date =document.getElementById('date');
date.value = new Date().toDateString();
// *********ionicons*******88
let icon = document.getElementById('icons');
window.onscroll = ()=>{
if(window.scrollY >=100){
icon.style.display = 'block';
icon.style.position = 'fixed';
}else{
icon.style.display = 'none';
}
}
icon.addEventListener('click',()=>{
window.scrollTo({top:0, behavior:"smooth"})
})
let span11 = document.getElementById('dated');
span11.innerHTML = new Date().getFullYear();

How to append a delete button to a comment with JavaScript

I am very new to JavaScript so I apologize in advance for this question! It's still hard for me to 'read' where I am going wrong.
I am trying to practice simple logic where there is a form with two inputs. Then, what is typed into the input is appended to the page after the person presses submit on the form. The person's inputs are structured as li being added to a ul.
I can make this part work fine on its own. However, I am trying to append not just an li, but a delete button with each li. Then, I want the delete button to be able to delete its associated li.
Here is my logic, but I know it is not right...
const form = document.querySelector('form');
const list = document.querySelector('#list');
form.addEventListener('submit', function(e) {
e.preventDefault();
let product = form.elements.product;
let qty = form.elements.qty;
const li = document.createElement('li');
const button = document.createElement('button')
li.innerText = `${product.value} ${qty.value}`;
button.textContent = "Delete"
li.appendChild('button')
list.appendChild(li);
product.value = '';
qty.value = '';
button.addEventListener('click', function() {
e.target.remove
})
})
<h1>Grocery List</h1>
<form action="/nowhere">
<label for="item">Enter A Product</label>
<input type="text" id="product" name="product">
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty">
<button>Submit</button>
</form>
<ul id="list"></ul>
<li>Test</li>

You have syntax errors, missing () and missing (e)
Too many quotes ('button') and you do not want to delete the target, but its containing li
const form = document.querySelector('form');
const list = document.getElementById('list');
const product = document.getElementById('product');
const quantity = document.getElementById('qty');
form.addEventListener('submit', function(e) {
e.preventDefault();
const prd = product.value,
qty = +quantity.value; // cast to number
if (prd === "" || qty === 0) return; // nothing to add
product.value = '';
quantity.value = '';
const li = document.createElement('li');
const delBut = document.createElement('button')
li.innerText = `${prd} ${qty}`;
delBut.textContent = "Delete"
li.appendChild(delBut)
list.appendChild(li);
delBut.addEventListener('click', function(e) {
e.target.closest('li').remove()
})
})
<h1>Grocery List</h1>
<form action="/nowhere">
<label for="item">Enter A Product</label>
<input type="text" id="product" name="product">
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty">
<button>Submit</button>
</form>
<ul id="list"></ul>

JavaScript Strike Through innerText Not Working

I am trying to create a To Do list and am having troubles strikingthrough a created To Do item. A "Click if Completed" button appears on the right side of the created to-do item which, when clicked, should strikeout the text. I am pretty sure it is an issue with the (e.target.newToDo.innerText.strike())
Do I need to create a variable for the newToDo.innerText? Am I still able to create one since I have created (newToDo.innerText = input.value) in the function earlier?
Just want to say that the people on this website are amazing and have helped a ton. Thank you in advance!
const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');
form.addEventListener('submit',function(e){
e.preventDefault();
const newToDo = document.createElement('li');
const removeBtn = document.createElement('button');
const completeBtn = document.createElement('button');
newToDo.innerText = input.value;
removeBtn.innerText = 'Click to Remove';
completeBtn.innerText = 'Click if Completed';
newToDo.appendChild(completeBtn);
newToDo.appendChild(removeBtn);
input.value = '';
todolist.appendChild(newToDo);
completeBtn.addEventListener("click", function(e){
e.target.newToDo.innerText.strike();
})
removeBtn.addEventListener("click", function(e){
e.target.parentElement.remove();
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>To Do List:</h1>
<ul id="todolist">
</ul>
<form action="" id="addToDo" name="addToDo">
<input type="text" id="theToDo"
name="addToDo"
placeholder="Add to the list here">
<button type="submit">Submit</button>
</form>
<script src=Test.js></script>
</body>
</html>

Why wasn't your code working
Your code wasn't working because of e.target.newToDo.innerText.strike() this does not target the li (parent element) and you need to set the innerText to the striked innerText or it will not show.
Why you should not use strike()
It is not good practice to edit styles within JS and the <strike> tag is not supported in HTML5.
Instead, create a CSS class like this:
.strike {
text-decoration: line-through;
}
Then append the .strike class to the HTML element.
Solution
const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');
form.addEventListener('submit',function(e){
e.preventDefault()
todolist.innerHTML += `<li>
<span>${input.value}</span>
<button onclick="strikeItem(this)">strike</button>
<button onclick="removeItem(this)">remove</button>
</li>`
})
function strikeItem(ele) {
const itemTextEle = ele.parentElement.querySelector('span')
itemTextEle.innerHTML = itemTextEle.innerText.strike()
}
function removeItem(ele) {
ele.parentElement.remove()
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>To Do List:</h1>
<ul id="todolist">
</ul>
<form action="" id="addToDo" name="addToDo">
<input type="text" id="theToDo"
name="addToDo"
placeholder="Add to the list here">
<button type="submit">Submit</button>
</form>
<script src=Test.js></script>
</body>
</html>
This is a bit easier to read and is less code to write.
This solution uses the strike() function to show you how to use it I would try appending a class instead.

Append your newToDo to todolist and change the innerHtml on click function call:
const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');
form.addEventListener('submit', function(e) {
e.preventDefault();
const newToDo = document.createElement('li');
const removeBtn = document.createElement('button');
const completeBtn = document.createElement('button');
newToDo.id = 'new_todo';
newToDo.innerText = input.value;
removeBtn.innerText = 'Click to Remove';
completeBtn.innerText = 'Click if Completed';
todolist.append(newToDo);
todolist.appendChild(completeBtn);
todolist.appendChild(removeBtn);
input.value = '';
completeBtn.addEventListener("click", function(e) {
var todo = document.querySelector('#new_todo');
var todoText = '<del>' + todo.innerText + '</del>';
todo.innerHTML = todoText;
})
removeBtn.addEventListener("click", function(e) {
e.target.parentElement.remove();
})
})
see the working fiddle here: https://jsfiddle.net/khushboo097/uak3f5s2/20/

const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');
form.addEventListener('submit',function(e){
e.preventDefault();
const newToDo = document.createElement('li');
const removeBtn = document.createElement('button');
const completeBtn = document.createElement('button');
newToDo.innerText = input.value;
removeBtn.innerText = 'Click to Remove';
completeBtn.innerText = 'Click if Completed';
newToDo.appendChild(completeBtn);
newToDo.appendChild(removeBtn);
input.value = '';
todolist.appendChild(newToDo);
completeBtn.addEventListener("click", function(e){
e.target.parentElement.style.textDecoration="line-through";
})
removeBtn.addEventListener("click", function(e){
e.target.parentElement.remove();
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>To Do List:</h1>
<ul id="todolist">
</ul>
<form action="" id="addToDo" name="addToDo">
<input type="text" id="theToDo"
name="addToDo"
placeholder="Add to the list here">
<button type="submit">Submit</button>
</form>
<script src=Test.js></script>
</body>
</html>

Do it like this:
const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');
form.addEventListener('submit', function(e) {
e.preventDefault();
const newToDo = document.createElement('li');
const newToDoName = document.createElement('span');
const removeBtn = document.createElement('button');
const completeBtn = document.createElement('button');
newToDoName.innerText = input.value;
removeBtn.innerText = 'Click to Remove';
completeBtn.innerText = 'Click if Completed';
newToDo.appendChild(newToDoName);
newToDo.appendChild(completeBtn);
newToDo.appendChild(removeBtn);
input.value = '';
todolist.appendChild(newToDo);
completeBtn.addEventListener("click", function(e) {
newToDo.innerHTML = newToDoName.innerText.strike();
})
removeBtn.addEventListener("click", function(e) {
e.target.parentElement.remove();
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>To Do List:</h1>
<ul id="todolist">
</ul>
<form action="" id="addToDo" name="addToDo">
<input type="text" id="theToDo" name="addToDo" placeholder="Add to the list here">
<button type="submit">Submit</button>
</form>
<script src=Test.js></script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

create a delete button for a li in javascript - javascript

Related

When new element is added, the status property of all old elements are updated to the new element's, JAVASCRIPT

I want to save the data in a textbox created repeatedly in JavaScript using webstorage

form submitting 0 to database

How to append a delete button to a comment with JavaScript

JavaScript Strike Through innerText Not Working

Categories

Resources