Jquery - Append Changes Using Checkboxes

Instead of adding the item to the list using an add button and then removing the appended item using a remove button, how do I make them the same button (or input) so that if it is

Solution 1:

if your aim is only to manage wished list by checkboxes this code should be sufficient.

var addedProducts = [];
$(document).on('click', '.items__wish', function() {
    var item = $(this);
    var itemIndex = item.index();
    if (item.parents('.wishlist__items').length > 0) {
        itemIndex = parseInt(item.attr('data-index'))
     }
    if (item.find('.my-wish-add').prop('checked') && addedProducts.indexOf(itemIndex) < 0) {
       if (item.parents('.wishlist__items').length == 0) {
        item.clone().attr('data-index', itemIndex).appendTo($('.wishlist__items'))
        addedProducts.push(itemIndex)
       }
    } 
  elseif (item.find('.my-wish-add').prop('checked')==false && addedProducts.indexOf(itemIndex) >= 0) {
 
        $('.products .items__wish').eq(itemIndex).find('.my-wish-add').prop('checked', false);


        $('.wishlist__items .items__wish[data-index="' + itemIndex + '"]').remove(); 
    addedProducts.splice( addedProducts.indexOf(itemIndex), 1 );
 
    }
});

body {
  font-family: "Font Awesome\ 5 Pro";
  font-weight: 900;
}

img {
  width: 50px;
}

.wishlist__list {
  position: absolute;
  right: 0;
}

.wishlist__itemsli {
  list-style: none;
}

<scriptsrc="https://pro.fontawesome.com/releases/v5.3.1/js/all.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divdata-id="wishlist"><divclass="wishlist__list"><ulclass="wishlist__items"></ul></div></div><divclass='products'><divclass="items__wish"><divid='1'class='item__title item__tile'>Product 1</div><imgclass="item__img"src="https://www.iconasys.com/wp-content/uploads/2017/06/360-Product-Photography-White-Background-Acrylic-Riser-08.jpg"><labelclass="wish-btn"><inputtype="checkbox"name="wish-check"class='my-wish-add'><iclass="wish-icon far fa-heart"></i></input></label></div><divclass="items__wish"><divid='2'class='item__title item__tile'>Product 2</div><imgclass="item__img"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqpSgkG4AQDQOe33jI1NiW3GW2JSB-_v36aREsVyFQH55JFOJ"><labelclass="wish-btn"><inputtype="checkbox"name="wish-check"class='my-wish-add'><iclass="wish-icon far fa-heart"></i></input></label>

Solution 2:

Update: You may consider moving removeFromWish() to the same scope as addToWish() so that it is accessible to other functions.

You can use jquery to see if the checkbox is checked, then either append the item or remove the item from the list accordingly.

$(".my-wish-add").on("change", function() {
  var product = getProductValues(this);
  if ($(this).is(":checked")) {
    addToWish({
      id: product.id,
      img: product.img,
      name: product.name,
    });
  } else {
    removeFromWish(product.id);
  }
});

Making these two changes should be able to solve your problem. If you want to uncheck the checkbox upon removal of the list item, you can also try the following:

(function() {
    var currentIndex = i;
    $("#my-wish-remove" + currentIndex).on("change", function() {
      $(this)
        .closest("li")
        .hide(400);
      setTimeout(function() {
        wish.items[currentIndex].stock = "";
        update_product(wish.items[currentIndex]);
        removeFromWish(wish.items[currentIndex].id);
        // uncheck (productID - 1)th checkbox
        $(".my-wish-add").eq(wish.items[currentIndex].id - 1).prop("checked", false);
      }, 400);
    });
  })();

Unchecking a checkbox like this may not be very clear. I hope you get the basic idea and adapt this code so that it fits your style.

[Updated] Demo:

// Wish Functionvar wish = {
  items: []
};
var update_product = function(product) {};
$(function() {
  //Add to wishvar addToWish = function(product, qty) {
    qty = qty || 1;
    var wish = getWish();
    var indexOfId = wish.items.findIndex(x => x.id == product.id);
    if (indexOfId === -1) {
      wish.items.push({
        id: product.id,
        img: product.img,
        name: product.name,
      });
      $parent = $("#" + product.id).closest(".items__wish");
      $parent
        .find(".wish-icon")
        .addClass("active")
        .attr("data-prefix", "fas");
    } else {
      wish.items[indexOfId].qty++;
      wish.items[indexOfId].stock = Number(product.stock);
    }
    //Update popup wishupdateWish(wish);
  };

  //Remove from wish on idvar removeFromWish = function(id) {
    var wish = getWish();
    var wishIndex = wish.items.findIndex(x => x.id == id);
    wish.items.splice(wishIndex, 1);
    $parent = $("#" + id).closest(".items__wish");
    $parent
      .find(".wish-icon")
      .first()
      .removeClass("active")
      .attr("data-prefix", "far");
    //Update popup wishupdateWish(wish);
  };

  var getProductValues = function(element) {
    var productId = $(element)
      .closest(".items__wish")
      .find(".item__tile")
      .attr("id");
    var productImg = $(element)
      .closest(".items__wish")
      .find(".item__img")
      .attr("src");
    var productName = $(element)
      .closest(".items__wish")
      .find(".item__title")
      .html();
    return {
      id: productId,
      img: productImg,
      name: productName,
    };
  };

  $(".my-wish-add").on("change", function() {
    var product = getProductValues(this);
    if ($(this).is(":checked")) {
      addToWish({
        id: product.id,
        img: product.img,
        name: product.name,
      });
    } else {
      removeFromWish(product.id);
    }
  });

  //Update wish html to reflect changesvar updateWish = function(wish) {
    //Add to shopping wish dropdown
    $(".wishlist__items").html("");
    for (var i = 0; i < wish.items.length; i++) {
      $(".wishlist__items").append(
        "<li>" +
        '<div class="my-wish-item">' +
        "<img src='" +
        wish.items[i].img +
        "' />" +
        '<div class="wish-main">' +
        '<div class="wish-name">' +
        wish.items[i].name +
        "</div>" +
        '<div class="my-wish-remove-container">' +
        '<input type="checkbox" id="my-wish-remove' +
        i +
        '" class="my-wish-remove" aria-hidden="true">' +
        "<i class='fas fa-heart'></i>" +
        "</div>"
      );

      (function() {
        var currentIndex = i;
        $("#my-wish-remove" + currentIndex).on("change", function() {
          $(this)
            .closest("li")
            .hide(400);
          setTimeout(function() {
            wish.items[currentIndex].stock = "";
            update_product(wish.items[currentIndex]);
            $(".my-wish-add").eq(wish.items[currentIndex].id - 1).prop("checked", false);
            removeFromWish(wish.items[currentIndex].id);
          }, 400);
        });
      })();
    }
  };
  //Get Wishvar getWish = function() {
    var myWish = wish;
    return myWish;
  };
});

body {
  font-family: "Font Awesome\ 5 Pro";
  font-weight: 900;
}

img {
  width: 50px;
}

.wishlist__list {
  position: absolute;
  right: 0;
}

.wishlist__itemsli {
  list-style: none;
}

<scriptsrc="https://pro.fontawesome.com/releases/v5.3.1/js/all.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divdata-id="wishlist"><divclass="wishlist__list"><ulclass="wishlist__items"></ul></div></div><divclass='products'><divclass="items__wish"><divid='1'class='item__title item__tile'>Product 1</div><imgclass="item__img"src="https://www.iconasys.com/wp-content/uploads/2017/06/360-Product-Photography-White-Background-Acrylic-Riser-08.jpg"><labelclass="wish-btn"><inputtype="checkbox"name="wish-check"class='my-wish-add'><iclass="wish-icon far fa-heart"></i></input></label></div><divclass="items__wish"><divid='2'class='item__title item__tile'>Product 2</div><imgclass="item__img"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqpSgkG4AQDQOe33jI1NiW3GW2JSB-_v36aREsVyFQH55JFOJ"><labelclass="wish-btn"><inputtype="checkbox"name="wish-check"class='my-wish-add'><iclass="wish-icon far fa-heart"></i></input></label>

Solution 3:

Here's a much cleaner implementation of the required functionality using buttons. You can just as easily change it to use checkboxes instead.

Pro-tip: While I understand you might have specific requirements, I'd recommend using a component based design approach and considering using pure JavaScript instead of third party libraries like jQuery.

$(function() {
  $("li button").click(function(event) {
    let targetList = '';
    if ($(event.target).closest(".list").attr('id') === 'product-list') {
      targetList = '#wish-list ul';
      targetLabel = 'Remove';
    } else {
      targetList = '#product-list ul';
      targetLabel = 'Add';
    }
    event.target.innerHTML = targetLabel;
    $(event.target).closest("li").appendTo(targetList);
  })
  $("#btn-display-list").click(function() {
    alert(JSON.stringify(getListInfo('#wish-list')));
  })
});

functiongetListInfo(type) {
  const list = [];
  $(type + " li").each(function(i, target) {
    list.push({
      id: $(target).attr("id"),
      img: $(target).find("img").attr("src"),
      name: $(target).find("h4").html()
    })
  })
  return list;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #ddd;
  font-weight: lighter;
}

.container {
  display: flex;
}

.list {
  width: 50%;
}

ul {
  padding: 0px;
}

li {
  list-style-type: none;
}

liimg,
lidiv {
  display: inline-block;
  margin-bottom: 10px;
  vertical-align: top;
}

liimg {
  max-width: 70px;
}

lih4 {
  margin: 0px;
}

h4,
h3 {
  font-weight: lighter;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.altbutton {
  background: #fff;
  color: #000;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container"><divid="product-list"class="list"><h3>Product Catalog</h3><ul><liid='prod-001'><imgclass="item__img"src="https://www.iconasys.com/wp-content/uploads/2017/06/360-Product-Photography-White-Background-Acrylic-Riser-08.jpg"><div><h4>product 1</h4><button>Add</button></div></li><liid='prod-002'><imgclass="item__img"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqpSgkG4AQDQOe33jI1NiW3GW2JSB-_v36aREsVyFQH55JFOJ"><div><h4>product 2</h4><button>Add</button></div></li></ul></div><divid="wish-list"class="list"><h3>Wishlist</h3><ul></ul></div></div><hr/><buttonid="btn-display-list">Show Wishlist</button>