We Keep Coding

The node to be removed is not a child of this node JavaScript

Other stack answers have failed to fix my problem because I think this occurs for different reasons. My JS code:
const addButton = document.querySelector('.addButton')
var input = document.querySelector('.input')
const draggable_list = document.getElementById('draggable-list'); //draggable_list is a ul
let itemBox;
let items;
const array = [];
const listItems = [];
let dragStartIndex;
class item {
constructor(itemName) {
this.createDiv(itemName);
}
createDiv(itemName) {
let removeButton = document.createElement('button');
removeButton.innerHTML = 'REMOVE';
removeButton.classList.add('removeButton');
draggable_list.appendChild(items);
items.appendChild(removeButton);
removeButton.addEventListener('click', () => this.remove(items);
}
async remove(item, value) {
draggable_list.removeChild(item)
}
}
async function check() {
if (input.value != '') {
array.push(input.value)
listItems.push(input.value)
array.forEach((numbers,index) => {
items = document.createElement('li')
items.setAttribute('data-index', index)
items.innerHTML = `
<div class="draggable" draggable="true">
<p class="phone-number">${numbers}</p>
<i class="fas fa-grip-lines"></i>
</div>`;
} )
new item(input.value)
input.value = ''
}
addButton.addEventListener('click', check)
When remove() is called for the first time, it successfully removes the last li element. But when it is called again, I get the following error:
Uncaught (in promise) DOMException: Node.removeChild: The node to be removed is not a child of this node

Does this work for you...
const addButton = document.querySelector('.addButton');
const input = document.querySelector('.input');
const draggable_list = document.getElementById('draggable-list');
//draggable_list is a ul
let itemBox;
let items;
const array = [];
const listItems = [];
let dragStartIndex;
class Item {
constructor(itemName) {
this.createDiv(itemName);
}
createDiv(itemName) {
let input = document.createElement('input');
input.value = itemName;
let removeButton = document.createElement('button');
removeButton.innerHTML = 'REMOVE'
removeButton.classList.add('removeButton');
draggable_list.appendChild(items);
items.appendChild(removeButton);
removeButton.addEventListener('click', (event) => {
if (event && event.target.parentElement) {
// this.remove(items));
this.remove(event.target.parentElement);
}
});
}
remove(item, value) {
draggable_list.removeChild(item);
}
}
function check() {
if (input.value != '') {
array.push(input.value);
listItems.push(input.value);
array.forEach((numbers, index) => {
items = document.createElement('li');
items.setAttribute('data-index', index)
items.innerHTML = `
<div class="draggable" draggable="true">
<p class="phone-number">${numbers}</p>
<i class="fas fa-grip-lines"></i>
</div>`;
});
new Item(input.value);
input.value = '';
}
}
addButton.addEventListener('click', check)
<button class="addButton">+</button>
<input type="text" class="input" />
<ul id="draggable-list">
</ul>

Instead of copying and pasting some convoluted code you don't understand you should try and write it yourself. Try and focus on what you require and nothing else.
Here is one way of doing it:
const [inp,btn,ul]=["input","button","ul"].map(e=>document.querySelector(e));
btn.onclick=function(){
ul.innerHTML+=`<li><p>${inp.value}</p><button>delete</button></li>`;
inp.value="";
}
ul.onclick=function(ev){
if (ev.target.tagName==="BUTTON")
ul.removeChild(ev.target.closest("li"));
}
<input type="text">
<button>add</button>
<ul></ul>

The items in the DOM are added multiple times

I got a problem,each time I add the element,it multiplicates itself(for example if there is 1 element in the cart,on the next click it will add 2 more,and if there are 3 elements,it will add 3 more,if 6,it will add 4 more),that's a huge problem,please help!
My js code:
let pList = document.getElementById("productList");
const addDrip = () => {
let Drip, localObj, tObj;
Drip = {
name: "Traditional Drip",
type: "normal",
price: "2.00",
imgSrc: "images/c5.png"
};
localObj = localStorage.getItem("Drip");
if(!localObj) tObj = [];
else tObj = JSON.parse(localObj);
tObj.push(Drip)
localStorage.setItem("Drip", JSON.stringify(tObj));
for(let i = 0;i < tObj.length;i++){
let htmlDrip = `
<div class="productDiv">
<p>${tObj[i].name}</p>
<p>${tObj[i].type}</p>
<p>${tObj[i].price}$</p>
<img src="${tObj[i].imgSrc}">
</div>
`
document.getElementById("productList").innerHTML += htmlDrip;
}
}
My html part:
<div class="cList">
<img src="images/c5.png"class = "tDrip">
<h1 class="Type">Traditional Drip</h1>
<button id="tAdd"onclick="addDrip()">Add Traditional Drip</button>
</div>
<div id = productList></div>

This is because your array already has the drip update from the localstorage
Simply replace your JS code with this and it will work desired way you want.
let pList = document.getElementById("productList");
const addDrip = () => {
let Drip, localObj, tObj;
Drip = {
name: "Traditional Drip",
type: "normal",
price: "2.00",
imgSrc: "images/c5.png"
};
localObj = localStorage.getItem("Drip");
console.log(localObj,"Local object")
if(!localObj) {
tObj = [];
tObj.push(Drip)
}else {
tObj = JSON.parse(localObj);
console.log(tObj,"T object")
}
localStorage.setItem("Drip", JSON.stringify(tObj));
for(let i = 0;i < tObj.length;i++){
let htmlDrip = `
<div class="productDiv">
<p>${tObj[i].name}</p>
<p>${tObj[i].type}</p>
<p>${tObj[i].price}$</p>
<img src="${tObj[i].imgSrc}">
</div>
`
document.getElementById("productList").innerHTML += htmlDrip;
}
}
you just have to push when your array is empty. Give it a try it will work.
NOTE : you can check the demo too. Just clear the localstorage if you refresh.https://www.w3schools.com/code/tryit.asp?filename=GS7FA0970MF3

You don't actually need to loop thru the array while adding the new item.
You can first get the items from localStorage
HTML:
<div class="cList">
<img src="images/c5.png" class="tDrip">
<h1 class="Type">Traditional Drip</h1>
<button id="tAdd" onclick="addDrip()">Add Traditional Drip</button>
</div>
<div id="productList"></div>
Script:
const pList = document.getElementById("productList");
let localObj = JSON.parse(localStorage.getItem("Drip"));
const parseItems = () => {
if (!localObj) localObj = [];
for (let i = 0; i < localObj.length; i++) {
let htmlDrip = `
<div class="productDiv">
<p>${localObj[i].name}</p>
<p>${localObj[i].type}</p>
<p>${localObj[i].price}$</p>
<img src="${localObj[i].imgSrc}">
</div>
`;
pList.innerHTML += htmlDrip;
}
}
parseItems();
const addDrip = () => {
let Drip;
Drip = {
name: "Traditional Drip",
type: "normal",
price: "2.00",
imgSrc: "images/c5.png"
};
if (!localObj) localObj = [];
localObj.push(Drip);
localStorage.setItem("Drip", JSON.stringify(localObj));
let htmlDrip = `
<div class="productDiv">
<p>${Drip.name}</p>
<p>${Drip.type}</p>
<p>${Drip.price}$</p>
<img src="${Drip.imgSrc}">
</div>
`;
pList.innerHTML += htmlDrip;
}

Shopping Cart and Calling Id/classes

ok I fixed most of my issues for my real estate project. The final problem I can't solve is my updateCartTotal Function. I get error message "Can not set property of Undefined at updateCartTotal" I have tried switching between querySelector and getElementsByClassName, taking the zeros out of my function, changing target elements, nothing seems to work. I know it might be something simple but I can't figure it out. HTML file below:
<section class="container content-section">
<h2 class="section-header">View Properties</h2>
<div id="propertyContainer" class="propertyItems1"></div>
</section>
<section class="container content-section">
<h2 class="section-header">CART</h2>
<div class="cart-row">
<span class="cart-item cart-header cart-column">Listing</span>
<span class="cart-avgPrice cart-header cart-column">PRICE</span>
<span class="cart-propType cart-header cart-column">Property Type</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
</div>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
</section>
This is the code I have for my js file:
//Recapture Data
let propertyItems1= document.getElementsByClassName(`#propertyItems1`);
let allItems = propertyContainer.getElementsByClassName(`fullAddress propType avgPrice`);
let data1 = [].map.call(allItems, fullAddress => fullAddress.textContent);
let data2 = [].map.call(allItems, propType => propType.textContent);
let data3 = [].map.call(allItems, avgPrice => fullAddress.textContent);
//Shopping Cart Functionality
if (document.readyState == 'loading') {
document.addEventListner('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
console.log("running the ready() function")
let removeItemButtons = document.getElementsByClassName('btn-danger')
for (let i = 0; i < removeItemButtons.length; i++) {
let button = removeItemButtons[i]
button.addEventListener('click', removeCartItem)
}
let quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (let i = 0; i < quantityInputs.length; i++) {
let input = quantityInputs[i]
input.addEventListner('change', quantityChanged)
}
let addToCartButtons = document.getElementsByClassName('property-item-button')
for (let i = 0; i < addToCartButtons.length; i++) {
let button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}
function purchaseClicked() {
alert('Thank You for purchasing a home')
let cartItems = document.getElementsByClassName('cart-items')[0]
while(cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function removeCartItem(event) {
let buttonClicked = event.target
buttonClicked.parentElement.remove
updateCartTotal()
}
function quantityChanged(event) {
let input = event.target
if(isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
let button = event.target
let propertyItems1 = button.parentElement
let fullAddress = propertyItems1.querySelector('.fullAddress').innerText
let propType = propertyItems1.getElementsByClassName('propType').innerText
let avgPrice = propertyItems1.getElementsByClassName('avgPrice').innerText
addItemToCart(fullAddress,propType,avgPrice)
updateCartTotal()
}
function addItemToCart(fullAddress, propType, avgPrice) {
let cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
let cartItems = document.getElementsByClassName('cart-items')[0]
let cartItemNames = cartItems.getElementsByClassName('cart-item-fullAddress')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == fullAddress) {
alert('This item is already added to the cart')
return
}
}
let cartRowContents = `
<div class="cart-item cart-column">
<span class="fullAddress">${fullAddress}</span>
<span class="propType">${propType}</span>
</div>
<span class="cart-avgPrice cart-column">${avgPrice}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}
function updateCartTotal() {
let cartItemContainer = document.getElementsByClassName('cart-items')[0]
let cartRows = cartItemContainer.getElementsByClassName('cart-row')
let total = 0
for (let i = 0; i < cartRows.length; i++) {
let cartRow = cartRows[i]
let avgPriceElement = cartRow.getElementsByClassName('cart-avgPrice')[0]
let quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
let avgPrice = parseFloat(avgPriceElement.innerText.replace('$', ''))
let quantity = quantityElement.value
total = total + (avgPrice * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-avgPrice')[0].innerText = '$' + total
}
Please help my project is due very soon.

Your class for the cart-avgPrice is spelled wrong. Change
document.getElementsByClassName('cart-total-avgPrice')[0].innerText = '$' + total
to
document.getElementsByClassName('cart-avgPrice')[0].innerText = '$' + total

Repeated objects with input values

I have a javascript repeater that creates forms,
but the problem is that when I bring the values ​​they are all entered in a single object instead of separate objects, which inside array locations should create a similar structure.
"locations":[
{
"coordinates":[
-80.128473,
25.781842
],
"description":"Lummus Park Beach",
"day":1
},
{
"coordinates":[
-80.647885,
24.909047
],
"description":"Islamorada",
"day":2
},
]
My code takes information from inputs but puts it in the same object instead of separate objects.
//This is the code which take input value and inser in boject structure
const createTour_form = document.querySelector('.form-create__tour');
if (createTour_form) {
createTour_form.addEventListener('submit', (cr) => {
cr.preventDefault();
//Ceeate an empty array
let loc_coordinates = [];
let loc_description = [];
let loc_day = [];
let get_locations = [];
//Get Coordinates
document.querySelectorAll(".location_field_card").forEach(f => {
let obj = [];
f.querySelectorAll(".location_new_tour").forEach(ele => obj[ele.value] = ele.value || "");
loc_coordinates.push(Object.keys(obj));
});
//Get Descriptions
document.querySelectorAll(".location_field_card").forEach(f => {
let obj1 = {};
f.querySelectorAll(".description_location").forEach(ele => obj1[ele.name] = ele.value || "");
loc_description.push(obj1)
});
//Get Day
document.querySelectorAll(".location_field_card").forEach(f => {
let obj2 = {};
f.querySelectorAll(".location_day").forEach(ele => obj2[ele.name] = ele.value || "");
loc_day.push(obj2)
});
//Reverse Coordinates
const getGeo = [...loc_coordinates].toString().split(',').reverse().join(' ').replace(' ', ' ,');
get_locations.push(getGeo)
const getLocation = Object.values(...loc_description);
const getValLocation = getLocation.toString();
const getDay = Object.values(...loc_day);
const getValDay =parseInt(getDay.toString());
let getTotaLocation = new Object({
"coordinates":[...get_locations],
"description":getValLocation,
"day":getValDay
});
console.log(getTotaLocation);
})
}
<form class="form form-create__tour">
<h1 class="title--create--tourpage">Locations</h1>
<div class="form__group all_tours_options">
<div id="add_location_field">
<div class="location_field_card">
<p class="subfield_natours_create_tour">Location</p>
<input class="form__input location_new_tour" type="text" value="24.5647846,-81.8068843">
<p class="subfield_natours_create_tour">Location Description</p>
<input class="form__input description_location" type="text" value="Lummus Park Beach">
<p class="subfield_natours_create_tour">Day</p>
<input class="form__input location_day" type="number" value="1" >
</div>
</div>
<button class="btn btn--small--add btn--green" id="add_location_fields">Add Location Field</button>
</div>
<div class="form__group right"><button class="btn btn--small btn--green" id="createTour">Create Tour</button></div>
</form>
<!--This Javascript code generate new fields when Add Locaton field is clicked-->
<script>
const addLocation = document.getElementById('add_location_fields');
if(addLocation){
let count_createdCards = 0;
let count_Deletebutton = 0;
let incrementFunction = 0;
addLocation.addEventListener('click',(st)=>{
st.preventDefault();
let createAddField = document.getElementById('add_location_field');
// Crd
count_createdCards++;
count_Deletebutton ++;
incrementFunction ++;
let card = document.createElement('div');
card.setAttribute('class','location_field_card');
card.setAttribute('id','delete_card_'+ count_createdCards)
//First Card Title
let cartTitle1 = document.createElement('p');
cartTitle1.setAttribute('class','subfield_natours_create_tour');
cartTitle1.textContent = 'Location';
let inputLocation = document.createElement('input');
inputLocation.classList.add('form__input');
inputLocation.classList.add('location_new_tour');
inputLocation.setAttribute('type','text');
inputLocation.setAttribute('value','24.5647846,-81.8068843');
//Second Card Title
let cartTitle2 = document.createElement('p');
cartTitle2.setAttribute('class','subfield_natours_create_tour');
cartTitle2.textContent = 'Location Description';
let inputDescription_location = document.createElement('input');
inputDescription_location.classList.add('form__input');
inputDescription_location.classList.add('description_location');
inputDescription_location.setAttribute('type','text');
inputDescription_location.setAttribute('value','Lummus Park Beach');
//Third Card Title
let cartTitle3 = document.createElement('p');
cartTitle3.setAttribute('class','subfield_natours_create_tour');
cartTitle3.textContent = 'Day';
let inputDescription_day = document.createElement('input');
inputDescription_day.classList.add('form__input');
inputDescription_day.classList.add('location_day');
inputDescription_day.setAttribute('type','number');
inputDescription_day.setAttribute('value','1');
let removeButton = document.createElement('a');
removeButton.classList.add('btn');
removeButton.classList.add('btn--small--add');
removeButton.classList.add('btn--red');
removeButton.setAttribute('onclick','removeAction_'+count_Deletebutton+'()');
let removeScript = document.createElement('script');
removeScript.innerHTML = "function removeAction_".concat(count_Deletebutton, "() {\n\n var delCard_")
.concat(incrementFunction, " = document.getElementById(\"delete_card_")
.concat(count_createdCards, "\");\ndelCard_")
.concat(incrementFunction, ".remove();}");
removeButton.textContent = 'Remove Location Field';
card.appendChild(cartTitle1);
card.appendChild(inputLocation);
card.appendChild(cartTitle2);
card.appendChild(inputDescription_location);
card.appendChild(cartTitle3);
card.appendChild(inputDescription_day);
card.appendChild(removeButton);
card.appendChild(removeScript);
createAddField.appendChild(card);
});
}
</script>

I solved the problem by adding in the folds that repeat the dynamic id:
//Increment Coordinates
let incrementCoordiantes = 0;
//Increment Description
let incrementDescription = 0;
//Increment Day
let incrementDay = 0;
addLocation.addEventListener('click',(st)=>{
let createAddField = document.getElementById('add_location_field');
incrementCoordiantes ++;
incrementDescription ++;
incrementDay ++;
let card = document.createElement('div');
......
inputLocation.setAttribute('id','getCoordinates_'+ incrementCoordiantes);
inputDescription_location.setAttribute('id','getDescription_' + incrementDescription);
inputDescription_day.setAttribute('id','getDay_' + incrementDay );
I use querySelectorAll to get the number of colums from repeater and after that I use for to incremet id to match the id from html file, all the value it's push after that in an array, and it's work.
const push_location_data = [];
const getAll_locations = document.querySelectorAll(".location_field_card");
for (let i=1; i< getAll_locations.length; i++) {
let cord_lat_lng = 'getCoordinates_' + i;
let cord_description = 'getDescription_' + i;
let cord_day = 'getDay_' + i;
let dinamic_obj = {
coordinates:[[document.getElementById(cord_lat_lng).value].toString().split(',').reverse().join(' ').replace(' ', ' ,')],
description:document.getElementById(cord_description).value,
day:document.getElementById(cord_day).value
}
push_location_data.push(dinamic_obj);
};
location arrray

Element text not changing when passing selected textContent and new value to an update function

I'm creating a CRUD page where the user can add, delete and edit text, but I have an issue in updating the text after I select it for edit.
In editText function when I click the edit button the text that was added will pop up inside the input field. When I click on the update button (triggering the updateText function), I can see the text in console log but the corresponding html is not updated.
HTML
<div class="main">
<form>
<input type="text" placeholder="search">
</form>
<ul></ul>
<div>
<input class="add-text" type="text" placeholder="Add Text">
<button id="add">Add</button>
<button id="update">update</button>
</div>
</div>
Javascript
const inputsearch = document.querySelector('form input');
const addInputBtn = document.querySelector('#add');
const update = document.querySelector('#update');
addInputBtn.addEventListener('click', addtext);
function addtext(){
let li = document.createElement('li');
let inputadd = document.querySelector('.add-text');
let addedtext = inputadd.value;
let h1Tag = '<h1 id="text">'+addedtext+'</h1>';
let tags = h1Tag + '<button id="delete">Delete</button><button id="edit">Edit</button>';
if(addedtext == ''){
alert('please add some text');
return;
}else{
li.innerHTML = tags;
document.querySelector('ul').appendChild(li);
}
li.querySelectorAll('#delete')[0].addEventListener('click', deleteText);
li.querySelectorAll('#edit')[0].addEventListener('click', editText);
getlist(li, h1Tag);
inputadd.value = '';
}
function deleteText(e) {
e.target.parentNode.remove();
document.querySelector('.add-text').value = '';
}
function editText(e) {
let currentText = e.target.parentNode.firstChild.textContent;
let currentValue = document.querySelector('.add-text');
currentValue.value = currentText;
getupdate(currentText, currentValue);
}
function getupdate(currentText, currentValue) {
update.addEventListener('click', updateText);
function updateText() {
currentText = currentValue.value
console.log(currentText = currentValue.value);
}
}
function getlist(li, h1Tag) {
inputsearch.addEventListener('keyup', serchText);
function serchText(e) {
let typetext = e.target.value.toLowerCase();
if(h1Tag.toLowerCase().indexOf(typetext) != -1){
li.style.display = 'block';
}else{
li.style.display = 'none';
}
}
}

To solve the issue without changing your overall approach, your edit button click needs to get the corresponding element (not just its textContent) and pass it to your getupdate() function to be updated when your update button is clicked. Relatively minor changes to your current functions:
function editText(e) {
const currentText = e.target.parentNode.firstChild;
const currentValue = document.querySelector('.add-text');
currentValue.value = currentText.textContent;
getupdate(currentText, currentValue);
}
function getupdate(currentText, currentValue) {
update.addEventListener('click', updateText);
function updateText() {
currentText.textContent = currentValue.value;
}
}
There are some other issues with your code, particularly the creation of multiple elements with the same id (which is malformed and will likely become problematic as you add additional features). Following is a snippet that addresses that issue as well as simplifying some of your functions and fixing the search.
const search = document.querySelector('form input');
const input = document.querySelector('.add-text');
const container = document.querySelector('ul');
let items = null;
let currentItem = null;
const searchItems = (event) => {
if (items) {
const s = event.currentTarget.value.toLowerCase();
for (const item of items) {
if (item.firstChild.textContent.toLowerCase().indexOf(s) !== -1) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
}
}
};
const deleteItem = (event) => {
currentItem = null;
event.currentTarget.parentNode.remove();
};
const editItem = (event) => {
currentItem = event.currentTarget.parentNode.firstChild;
input.value = currentItem.textContent;
};
const updateItem = () => {
if (currentItem) {
currentItem.textContent = input.value;
}
};
const addItem = () => {
let val = input.value
if (val) {
const li = document.createElement('li');
let inner = '<h1 class="text">' + val + '</h1>';
inner += '<button class="delete">Delete</button>';
inner += '<button class="edit">Edit</button>';
li.innerHTML = inner;
container.appendChild(li);
val = '';
currentItem = li.firstChild;
items = document.querySelectorAll('li');
for (let del of document.querySelectorAll('.delete')) {
del.addEventListener('click', deleteItem);
}
for (let edit of document.querySelectorAll('.edit')) {
edit.addEventListener('click', editItem);
}
} else {
alert('please add some text');
return;
}
};
search.addEventListener('keyup', searchItems);
document.querySelector('#add').addEventListener('click', addItem);
document.querySelector('#update').addEventListener('click', updateItem);
<div class="main">
<form>
<input type="text" placeholder="Search">
</form>
<ul></ul>
<div>
<input class="add-text" type="text" placeholder="Add Text">
<button id="add">Add</button>
<button id="update">Update</button>
</div>
</div>