append 문제..

[정중식]

고집이있어서 제이쿼리말고 순수 자바스크립트로 UI구현해보고싶습니다.
아래와같이했는데 사진과같은 문제가 발생해요..


담기 버튼을 누르면 카운트는 올라가지만 ,요소가 계속 추가됩니다

아마 
insertAdjacentHTML 이것때문에 요소가 계속 추가되는거같은데.. 혹시 무슨 방법이없을까요? 

 // 장바구니 담기버튼 클릭 이벤트
      const add = document.querySelectorAll('.add');

      add.forEach((i) => {
        i.addEventListener('click', (e) => {
          dragTitle.classList.add('hide');

          let productId = e.target.parentNode.parentNode.dataset.id;

          let findNum = carts.findIndex((num) => num.id == productId);

          if (findNum === -1) {
            let currentProduct = products.find((product) => {
              return product.id == productId;
            });

            currentProduct.count = 1;
            carts.push(currentProduct);
          } else {
            carts[findNum].count++;
          }

          carts.forEach((cart) => {
            dragScreen.insertAdjacentHTML(
              'beforeend',
              `
                    <div class="product-item product-cart-item" draggable="true" ondragstart="drag(event)">
                        < img src=${cart.photo} alt="" />
                        <h5 class="title">${cart.title}</h5>
                        <p class="brand">${cart.brand}</p>
                        <p class="price">${cart.price}</p>
                        <div>
                        <input type="number" value=${cart.count} >
                        </div>
                    </div>`
            );
          });
        });
      });

[codingapple]

.add누를 때 장바구니에있는걸 반복문돌려서 계속 저기 넣으라고 해서 그런듯요
반복문쓰지말거나 반복문 전에 기존 html은 지웁시다

[정중식]

와;; 갓뎀;  ㅁㅊ 당신은 신입니까?
제가 오늘 하루 절반을 투자한것을 한번의 답변으로;; 
반복문전에 기존html.innerHTML ='';해주니까 잘되네요

[글쓴이]

글