请帮忙。我为选定的产品制作了这个价格计算器。原则是 - 您选择产品的型号及其数量。您按下按钮 - 添加 - 并在下面自动创建该数量的位置。您可以创建任意数量的职位。总金额会相应变化。您还可以删除任何头寸，总金额减少，删除产品的价格。问题是，当您删除最近的位置时，一切正常。但是，如果您从中间或第一个头寸中删除一个头寸，则该头寸的价格将重复多次，因为在被删除的头寸下方有更多头寸。因此，从总金额中减去不正确。在我看来，问题出在数组（或者，正确的，导航，伪数组）中，我在其中使用了删除按钮。但究竟是什么，我无法理解。我正在迭代。通过 forEach 根本不起作用。
let mainPrice = document.querySelector('.price__input'); // итоговая цена
let create = document.querySelector('.wrap-item'); // общий блок с элементами
let chooseModel = create.querySelector('.model'); // поле выбора модели
let chooseQuantity = create.querySelector('.values'); // поле выбора кол-ва
let more = document.querySelector('.more-item'); // кнопка добавить позицию
let boxItems = document.querySelector('.box'); // блок, куда генерятся созданные позиции
more.addEventListener('click', function(){
let selectVal = chooseModel.selectedIndex; // индекс выбранного option
let allOptions = chooseModel.options; // все option в select
let currOption = allOptions[selectVal]; // конкретная выбранная позиция
let chooseModelPrice = currOption.getAttribute('data-price'); // сумма, которая стоит data-price
let chooseModelValue = chooseModel.value; // выбранная модель
// итоговая цена = итоговая цена + сумма, которая стоит в data-price * кол-во выбранной модели
mainPrice.value = +mainPrice.value + chooseModelPrice * chooseQuantity.value;
// создаем блок с полями (модель и кол-во)
let item = document.createElement('div');
item.classList.add('item');
// создаем поле с выбранной моделью
let addModel = document.createElement('input');
addModel.classList.add('add-model');
addModel.value = chooseModelValue;
// создаем поле с выбранным кол-вом
let addValues = document.createElement('input');
addValues.classList.add('add-values');
addValues.value = chooseQuantity.value;
// создаем поле с суммой за конкретное кол-во выбранной модели
let price = document.createElement('span');
price.classList.add('curr-price');
price.innerHTML = chooseModelPrice * chooseQuantity.value;
// создаем кнопку, при клике на кот. будет удаляться соответствующий блок с полями
let deleteItem = document.createElement('span');
deleteItem.classList.add('delete-item');
// добавляем все созданные элементы
boxItems.appendChild(item);
item.append(addModel, addValues, price, deleteItem);
// сбрасываем значения полей выбора
chooseModel.value = "Выберите модель";
chooseQuantity.value = 1;
deleteFunc();
});
// удаление позиций
let deleteBtns = document.getElementsByClassName('delete-item');
function deleteFunc(){
for(let elem of deleteBtns){
let currPrice = elem.parentElement.querySelector('.curr-price').innerHTML;
elem.addEventListener('click', function(event){
console.log(elem.parentElement);
elem.parentElement.remove();
mainPrice.value = mainPrice.value - currPrice;
});
}
}.form {
width: 580px;
}
.form__item {
width: 30%;
margin: 0 0 30px 0;
}
.form__item label {
display: block;
}
.form__submit {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.wrap-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}
.more-item {
cursor: pointer;
}
.delete-item {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid;
cursor: pointer;
}
.delete-item::after {
content: "-";
position: absolute;
top: 50%;
left: 50%;
}<form id="form" class="form" action="">
<div class="wrap-item">
<div class="form__item">
<label for="">Модель</label>
<select class="model" name="">
<option>Выберите модель</option>
<option value="Модель 1" data-price="100">Модель 1</option>
<option value="Модель 2" data-price="200">Модель 2</option>
<option value="Модель 3" data-price="300">Модель 3</option>
</select>
</div>
<div class="form__item">
<label for="">Количество</label>
<input type="number" class="form__input values" value="1" min="1">
</div>
<div class="form__item">
<div class="more-item">Добавить позицию</div>
</div>
</div>
<div class="box">
</div>
<!-- ========================== -->
<!-- ========================== -->
<div class="form__submit">
<div class="form__price price">
Итого:
<input type="text" class="price__input" value="0">
руб.
</div>
</div>
</form>
js代码没怎么改，希望对你有帮助。现在按您的要求工作。出于某种原因，在添加新位置时，eventListener 在循环中被迭代。我通过传递必要的参数来改变它。