How to remove multiple values in array. tried for loop already

I was playing around with bind function mainly and i decided to test out in removing all items at once in the ItemsinCart array when click the checkout button. it works by using pop function but when i tried for loop it does not work. this is the portion of the function where i also changed to for loop.

please advise how can i achieve it.

    <h1>The Books</h1>
    <div id="bookstore"></div>
    <h1>Your Cart</h1>
    <div id="cart"></div>

  <script>
  const bookstore = {
    books: ["Java", "Python", "JavaScript"],
      removeBook(title) {
      let newList = this.books.filter((book) => book != title);
      this.books = newList;
      this.displayBookstore();
  },

  displayBookstore() {
    const renderTarget = document.getElementById("bookstore");
    const bookList = this.books.map((book) => `<p>${book}</p>`);
    renderTarget.innerHTML = bookList.join("");
    shoppingCart.displayCart(this.removeBook.bind(this));
   },
  };

  const shoppingCart = {
    itemsInCart: ["Python", "Java"],
    handleClick(remove) {           //this is the section where i tried for loop.
    remove(this.itemsInCart.pop());
 },

  displayCart(clickHandler) {
    const renderTarget = document.getElementById("cart");
    const itemsInCart = this.itemsInCart.map((item) => `<p>${item}</p>`);
    const checkoutButton = "<button id='checkout'>Check Out</button>";
  renderTarget.innerHTML = itemsInCart.join("") + checkoutButton;
  document
 .getElementById("checkout")
 .addEventListener("click", () => this.handleClick(clickHandler));
    },
  };
  bookstore.displayBookstore();
</script>