JavaScript funcion isn't working, but I'm sure everything's fine-CodePudding

The last function won't work, I don't know why. Tried changing the removeAttribute to setAttribute still won't work. Any suggestions?

        
        let mainEl = element.parentElement;
        let price = parseInt(mainEl.querySelector('p span').innerText);
        let name = mainEl.querySelector('h3').innerText;
        let vegetables = document.querySelectorAll('.single-item')
    
        AllTotal -= price;
        
        document.querySelector('.total').innerText=`Total: $${AllTotal}`;
    
        mainEl.remove();
    
        vegetables.forEach(function(vege){
            if (vege.querySelector('.si-content h3').innerText === name){
                
                vege.querySelector('.actions button').removeAttribute("disabled");
                vege.querySelector('.actions button').innerText = "Dodaj";
                vege.querySelector('.actions input').value = 0;
            };
        });
    };```

CodePudding user response：

It does not work because in your compression if (vege.querySelector('.si-content h3').innerText === name){ it compares for example Krompir and Krompir: and since this has an extra : in the list , it cant find it.

I have changed your code and removed : when you add items to your list from this <h3>${name}:</h3> to this <h3>${name}</h3>

let AllTotal = 0;

function addToCart (elem){
    let mainEl = elem.closest('.single-item');
    let quantity = mainEl.querySelector('input').value;
    let name = mainEl.querySelector('.single-item h3').innerText;
    let price = mainEl.querySelector('.price').innerText;
    
    price = parseInt(price.substring(1));

    if(quantity == 0){
        alert('Dodajte kolicinu!');
        return;
    }

    let total = price * quantity;

    document.querySelector('.cart-items').innerHTML  = 
    `<div class"cart-single-item">
      <h3>${name}</h3> 
      <p>${quantity} x $${price} = $<span>${total}</span></p> 
      <button onclick="remove(this)" >Ukloni</button>
    </div>`

    elem.setAttribute('disabled', 'true');
    elem.innerText ='Dodato'

    AllTotal  = total;

    document.querySelector('.total').innerText=`Total: $${AllTotal}`;
}

function remove(element){
    let mainEl = element.parentElement;
    let price = parseInt(mainEl.querySelector('p span').innerText);
    let name = mainEl.querySelector('h3').innerText;
    let vegetables = document.querySelectorAll('.single-item')

    AllTotal -= price;
    document.querySelector('.total').innerText=`Total: $${AllTotal}`;

    mainEl.remove();

    vegetables.forEach(function(vege){
        if (vege.querySelector('.si-content h3').innerText === name){
            vege.querySelector('.actions button').removeAttribute('disabled');
            vege.querySelector('.actions button').innerText = "Dodaj";
            vege.querySelector('.actions input').value = 0;
        };
    });


}

<div >
    <div >
        <div  data-type="krompir">
            <div >
                <h3>Krompir</h3>
                <p >$10</p>
            </div>
            <div >
                <input type="number" name="quantity" value="0" min="0">
                <button onclick="addToCart(this)">Dodaj</button>
            </div>
        </div>
        <div  data-type="paradajz">
            <div >
                <h3>Paradajz</h3>
                <p >$20</p>
            </div>
            <div >
                <input type="number" name="quantity" value="0" min="0">
                <button onclick="addToCart(this)">Dodaj</button>
            </div>
        </div>
    </div>
    <div >
        <h2>Korpa</h2>
        <div ></div>
        <div ></div>
    </div>
</div>

that being said this not ideal. what you should be doing is separating UI and code logic by adding a data attribute or class name to recognize the list item instead of text inside html element.