I need to add a remove item button in my cart functioning to remove my item in my JS

const cartDiv = document.querySelector('.cart-div');
// sepet simgesine tıkladığında .alışır
cartDiv.addEventListener('click', (b) => {
  // sepet görünürse gizle gizliyse göster
  if (document.querySelector('.basket').style.visibility == 'visible') {
    document.querySelector('.basket').style.visibility = 'hidden'
  } else {
    document.querySelector('.basket').style.visibility = 'visible'
  }


})
const container = document.querySelector('.main');
// container alanına tıkladığında çalıştır
container.addEventListener('click', () => {
  // sepet görünürse gizle
  if (document.querySelector('.basket').style.visibility == 'visible') {
    document.querySelector('.basket').style.visibility = 'hidden'
  }

  ;

})


const product = document.querySelector('.product');
product.addEventListener('click', (event) => {
  // eksiye basınca çalıştır
  if (event.target.classList.contains('minus-img')) {
    // ürün adedini bir azalt
    event.target.nextElementSibling.innerText--;
    // 9 dan büyük uyarısını gizle
    document.querySelector(".mostten").style.display = 'none';
    // 0 dan küçük girilirse 0 a eşitle
    if (event.target.nextElementSibling.innerText < 1) {
      event.target.nextElementSibling.innerText = 1
    }
  }


  // artıya basınca çalıştır
  if (event.target.classList.contains('plus-img')) {
    // adedi artır
    event.target.previousElementSibling.innerText++
      //ürün adedi 9 u geçmesin
      if (event.target.previousElementSibling.innerText > 9) {
        //9 dan büyük ürün adedi girilirse uyarı titlesi açılsın

        document.querySelector(".mostten").style.display = 'block';
        //ürün adedi 9 da sabit kalsın
        event.target.previousElementSibling.innerText = 9

      }
  }
  // cart ekleye tıklayınca çalıştır
  if (event.target.classList.contains('add-cart')) {

    // ürün adedi 0 dan büyükse
    if (event.target.previousElementSibling.previousElementSibling.firstElementChild.nextElementSibling.innerText > 0) {
      //aded artınca sepetin içini görünür yap
      document.querySelector('.box-content').style.display = 'block';
      document.querySelector('.empty').style.display = 'none';
      document.querySelector('.top-quantity').style.display = 'block'
      // ürün fiyatını sepitin içindeki ürün fiyatına eşile
      document.querySelector('.price-product').innerText = document.querySelector('.cost-price').innerText;
      //seçilen ürün adedini sepetteki adede eşitle
      document.querySelector('.quantity-product').innerText = document.querySelector('.quantity').innerText;
      //sepetteki fiyat totali hesapla



    }
    document.querySelector('.total-product').innerText = event.target.previousElementSibling.previousElementSibling.firstElementChild.nextElementSibling.innerText * 125;
    document.querySelector('.top-quantity').innerText = event.target.previousElementSibling.previousElementSibling.firstElementChild.nextElementSibling.innerText;
    if (event.target.previousElementSibling.previousElementSibling.firstElementChild.nextElementSibling.innerText == 0) {
      document.querySelector('.box-content').style.display = 'none';
      document.querySelector('.empty').style.display = 'block';
      document.querySelector('.top-quantity').style.display = 'none';
    }

  }


});

:root {
  --orange: hsl(26, 100%, 55%);
  --pale-orange: hsl(25, 100%, 94%);
  --very-vark-blue: hsl(220, 13%, 13%);
  --dark-grayishblue: hsl(219, 9%, 45%);
  --grayish-blue: hsl(220, 14%, 75%);
  --light-grayish-blue: hsl(223, 64%, 98%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  /*  with 75% opacity for lightbox background */
}

@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;600;700;900&display=swap');
.container {
  font-family: 'Kumbh Sans', sans-serif;
}


/************* NAVBAR *************************/

.navbar {
  padding: 0 !important;
}

.navbar .container-fluid {
  padding-left: 0;
  margin: 0 !important;
}

.navbar-brand {
  margin-right: 2.5rem;
  align-items: center;
  justify-content: center;
  display: flex;
}

.navbar .nav-item {
  margin-right: 1rem
}

nav .nav-link {
  transition: all 0.5s ease;
  padding: 3rem;
  border-bottom: 5px solid white;
}

nav .nav-link:hover {
  box-sizing: content-box;
  border-bottom: 5px solid var(--orange);
}

nav button {
  padding: 0;
  margin: 0;
  border: none !important;
  background-color: inherit
}

.ava {
  padding: 0;
  transition: all 0.3s ease;
  border: 3px solid white;
  border-radius: 50%;
}

.ava:hover {
  border: 3px solid var(--orange);
}


/************* MAİN *************************/


/************* MAİN LEFT *************************/

main.row {
  padding: 1rem;
}

section.left {
  padding: 3rem 4rem;
}

section.left .img-fluid {
  border-radius: 15px;
  margin-bottom: 1rem;
}

.img-thumbnail {
  padding: 0;
  transition: all 0.3s ease;
  border: 4px solid white;
  border-radius: 15px;
  float: left;
  max-height: 100px;
  max-width: 100px;
}

.img-thumbnail:hover {
  opacity: .3;
  border: 4px solid var(--orange);
}

section.left a {
  padding: 0;
}


/************* MAİN RİGHT *************************/

section.right {
  padding: 3rem 4rem;
}

section.right h5 {
  font-weight: bold;
  color: var(--orange);
  margin-top: 3rem;
}

section.right h1 {
  font-weight: 700;
  margin-bottom: 2rem;
  ;
}

.min-plus button {
  z-index: 1;
}

.mostten-div {
  position: relative;
}

.mostten {
  position: absolute;
  padding: 1rem;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 12px 40px 1px rgba(105, 105, 105, 0.46);
  background-color: #fff;
  transform: translate(-20%, 10%);
  display: none;
}


/************* JS *************************/

.cost {
  font-size: 2rem;
  font-weight: bold;
}

.cost .discount {
  background-color: var(--pale-orange);
  color: var(--orange);
  font-size: 1.2rem;
  padding: 5px;
  margin-left: 1rem;
  border-radius: 5px;
}

.old-price {
  font-weight: 600;
  font-size: 18px;
  color: var(--grayish-blue);
  text-decoration: line-through;
}

.min-plus {
  background-color: var(--light-grayish-blue);
  display: inline-block;
  padding: 8px;
  width: 125px;
  border-radius: 8px;
  margin-right: 20px;
  margin-top: 15px;
  text-align: center;
}

.min-plus img {
  background-color: inherit;
  border: none;
  margin: 5px;
  cursor: pointer;
  padding: 8px;
}

.add-cart {
  display: inline-block;
  margin-left: 100px;
  color: var(--white);
  background-color: var(--orange);
  padding: 15px 3rem;
  border: none;
  border-radius: 8px;
  text-align: center;
  margin-top: 1rem;
}

.add-cart:active {
  transform: scale(0.99)
}

.add-cart:hover {
  opacity: .7;
}

.add-cart i {
  margin-right: 10px;
}

.minus:active,
.plus:active {
  position: absolute;
  transform: scale(0.9)
}

.minus-img {
  margin-top: -5px;
  letter-spacing: -5px;
  margin-left: 5px;
  font-size: 35px;
  font-weight: 600;
  user-select: none;
  float: left;
  cursor: pointer;
  color: black;
}

.minus-img:hover {
  color: #f7444e;
}

.plus-img {
  margin-top: 1px;
  margin-right: 5px;
  font-size: 30px;
  font-weight: 600;
  user-select: none;
  float: right;
  cursor: pointer;
  color: black;
}

.plus-img:hover {
  color: #f7444e;
}

.quantity {
  font-weight: 600;
  font-size: 18px;
  margin-top: 7.5px;
  display: inline-block;
}


/************* BASKET *************************/

.cart-div {
  float: right;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s linear;
}

.basket {
  width: 350px;
  height: 250px;
  border-radius: 8px;
  box-shadow: 0px 12px 40px 1px rgba(105, 105, 105, 0.46);
  background-color: #fff;
  transform: translate(-50%, 5%);
  visibility: hidden;
}

.basket h5 {
  text-align: start;
  padding: 1.3rem;
  color: black;
  border-bottom: 1px solid rgb(221, 221, 221);
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.cart-div-content {
  text-align: start;
  padding: 1.4rem;
}

.cart-div-content img {
  width: 50px;
  border-radius: 5px;
}

.basket-img-kutu {
  width: 50px;
  height: 50px;
}

.checkout {
  cursor: pointer;
  background-color: var(--orange);
  color: var(--white);
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  margin: 0 1.4rem;
}

.checkout:active {
  transform: scale(0.99)
}

.box-content {
  display: none;
}

.empty {
  text-align: center;
  font-size: 1.2em;
  color: var(--dark-grayishblue);
  margin-top: 3rem;
  display: block
}

.top-quantity {
  position: absolute;
  transform: translate(15px, -50px);
  width: 22px;
  height: 17px;
  color: var(--white);
  background-color: var(--orange);
  text-align: center;
  border-radius: 8px;
  font-size: 13px;
  display: none;
}


/************* MEDİA *************************/

@media (max-width: 991px) {
  .main {
    display: block;
  }
  nav .nav-link {
    transition: all 0.5s ease;
    padding: 0.3rem;
    border-bottom: 5px solid white;
  }
}

@media (max-width: 768px) {
  main.row {
    padding: 0;
  }
  section.left {
    padding: 0;
  }
  section.right {
    padding: 0;
  }
}

@media (max-width: 576px) {
  .container {
    width: 100%;
  }
  section.right {
    padding: 0;
    width: 80%;
    margin-left: 10%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
  <!-- CSS only -->
  <!-- JavaScript Bundle with Popper -->
  <link rel="stylesheet" href="css/style.css" />
  <title>Selman's E-commerce product page</title>
</head>

<body>
  <div class="container">
    <!-------------------- NAV ------------------------------------>

    <nav class="navbar navbar-expand-lg bg-white py-4 border-bottom">
      <div class="container-fluid">
        <div class="nav-left">


          <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0 login">
          <li class="nav-item">
            <a class="cart-div">
              <img src="./images/icon-cart.svg" alt="card" />
              <div class="top-quantity">1</div>
              <div class="basket">
                <h5>Cart</h5>
                <p class="empty">Your cart is empty.</p>
                <div class="box-content">
                  <div class="cart-div-content d-flex">
                    <div class="basket-img-kutu">
                      <img src="./images/image-product-1.jpg" alt="" />
                    </div>

                    <div>
                      <p class="ms-3 text-muted product-name">
                        Fall Limited Edition Sneakers
                      </p>
                      <p class="product-price ms-3 text-muted">
                        $<span class="price-product">125</span>.00<span class="quantity-product"></span>
                      </p>
                    </div>
                  </div>
                  <div class="checkout">Checkout</div>
                </div>
              </div>
            </a>

            <button>
              <img id="avatar" class="ava ms-5" src="./images/image-avatar.png" alt="avatar" width="57" />
            </button>
          </li>
        </ul>
      </div>
    </nav>

    <!------------------ MAİN ------------------------------->

    <main class="row my-5 main">
      <section class="col left">
        <div>
          <div class="row">
            <div class="col">
              <a data-fslightbox href="./images/image-product-1.jpg" title="product-1">
              </a>
            </div>
          </div>
          <div class="row product-img-div">

          </div>
        </div>
      </section>
      <section class="col right">
        <div class="product">
          <div class="mostten-div">
            <div class="min-plus">

              <span class="minus-img">--</span>

              <span class="quantity">1</span>


              <span class="plus-img">+</span>

            </div>
            <div class="mostten">You can choose up to 9 pieces</div>
            <button class="add-cart"><i class="fa-solid fa-cart-arrow-down"></i>
              Add to cart
            </button>
          </div>
        </div>
      </section>
    </main>
  </div>

  <script src="./app.js"></script>
</body>

</html>

I need to create the remove button inside the cart on the item,

as well as fixing the (- 1 +) area to work and the JavaScript would render how many were ordered in the cart.

And that the item wont get removed from the cart after i reload the page.

please i need the answer fast because I'm working on a big project that took a lot of time from me and i need to finish it quick.

If there is an error popping up on clicking "Add To Cart" then just copy all my code and view it online.

name of files:

index.html

style.css

app.js

all of them are in the same folder no subfolders inside for js or css.

Thank You....