CODEWITHSUNDEEP
javascripthtml
Guilherme
Guilherme

Reputation: 325

Delete only works on the child not the parent

I'm doing a crud cart, the problem is in the delete, when I try do delete an item only deletes the <img onclick="deleteItemCart()" class="menu-thrash-save" src="img/thrash-can.jfif" width=15 alt="Thrash"></img>'; and not the parent '<div id="bets-remove" class="cart-left-row">'.

The 3 console.log and error are at the bottom

const addToCart = function () {
  getDescription('games.json', function (err, data) {
    if (err === null) {
      console.log('Ocorreu um erro' + err);
    } else {
      var cartBets = document.getElementById('cart-bets');
      if (firstClickCart === 0) {
        cartBets.innerHTML = '';
        firstClickCart = 1;
      }
      cartBets.innerHTML += '<div id="bets-remove" class="cart-left-row">';
      cartBets.innerHTML += '<div class="bar-side-cart">';
      cartBets.innerHTML +=
        '<img onclick="deleteItemCart()" class="menu-thrash-save" src="img/thrash-can.jfif" width=15 alt="Thrash"></img>';
      cartBets.innerHTML +=
        '<p class="cart-right-text">01, 02, 04, 05, 06, 07, 09, 15, 17, 20, 21, 22, 23, 24, 25</p>';
      cartBets.innerHTML += '<div class="bets-info-right">';
      cartBets.innerHTML += '<div class="bets-info-megasena">Mega-Sena</div>';
      cartBets.innerHTML += '<div>R$ 4,50</div>';
      cartBets.innerHTML += '</div>';
    }
  });
};

function deleteItemCart() {
  var deleteFather = document.getElementById('bets-remove');
  var targetDelete = this.event.target;
  console.log(deleteFather);
  console.log(targetDelete);
  console.log(deleteFather.parentNode.removeChild(targetDelete));
  deleteFather.parentNode.removeChild(targetDelete);
}

enter image description here

Upvotes: 0

Views: 42

Answers (2)

Barmar
Barmar

Reputation: 781300

When you call a function with onclick="deleteItemCart()", this is not set automatically in the function. It's using the global context, so this == window, not the element that was cllicked.

You should pass this explicitly.

You can't use document.getElementById('bets-remove') to get the parent node. You're creating multiple elements with this ID, which is not valid; deleteFather will always be set to the first of them, not the parent of the item you clicked on. But you don't need to get the father; you can use .remove() to remove an element explicitly.

But targetDelete isn't the element you want to remove, it's just the image. Use .closest() to find the containing DIV for the entire cart item.

Another problem is the way you're adding the item to the cart. Whenever you assign to .innerHTML it reparses all the HTML to create valid DOM. You can't create nested elements by successive concatenations, because it automatically closes any unclosed elements. Instead, do all the concatenation into a string, then assign that to innerHTML at once.

const addToCart = function () {
  getDescription('games.json', function (err, data) {
    if (err === null) {
      console.log('Ocorreu um erro' + err);
    } else {
      var cartBets = document.getElementById('cart-bets');
      if (firstClickCart === 0) {
        cartBets.innerHTML = '';
        firstClickCart = 1;
      }
      let html = '';
      html += '<div id="bets-remove" class="cart-left-row">';
      html += '<div class="bar-side-cart">';
      html +=
        '<img onclick="deleteItemCart()" class="menu-thrash-save" src="img/thrash-can.jfif" width=15 alt="Thrash"></img>';
      html +=
        '<p class="cart-right-text">01, 02, 04, 05, 06, 07, 09, 15, 17, 20, 21, 22, 23, 24, 25</p>';
      html += '<div class="bets-info-right">';
      html += '<div class="bets-info-megasena">Mega-Sena</div>';
      html += '<div>R$ 4,50</div>';
      html += '</div></div></div>';
      cartBets.innerHTML += html;
    }
  });
};

function deleteItemCart(targetDelete) {
  console.log(targetDelete);
  let item = targetDelete.closest(".cart-left-row");
  item.remove();
}

Upvotes: 3

Kelvin Schoofs
Kelvin Schoofs

Reputation: 8718

Your HTML looks something like this:

<div id="bets-remove" class="cart-left-row">
    <div class="bar-side-cart">
        <img onclick="deleteItemCart()" class="menu-thrash-save" src="img/thrash-can.jfif" width=15 alt="Thrash"></img>
        <p class="cart-right-text">01, 02, 04, 05, 06, 07, 09, 15, 17, 20, 21, 22, 23, 24, 25</p>
        <div class="bets-info-right">
            <div class="bets-info-megasena">Mega-Sena</div>
            <div>R$ 4,50</div>
        </div>
    </div>
</div>

your HTML is missing two </div>s it seems.

I'm not sure whether it's safe to perform multiple cartBets.innerHTML += operations. I think e.g. Chromium-based browsers would "auto-correct" the HTML for e.g. missing closing tags.

As for your actual problem, your onclick has event.target pointing at the <img> tag, yet your deleteFather is the top <div id="bets-remove" class="cart-left-row">. You need to delete the img tag from <div class="bar-side-cart"> instead.

Of course, it might be better to switch over to a framework such as React, instead of using raw HTML and such.

Upvotes: 2

Related Questions