Append entire div inside another div

jquery

#1

I want to show the entire div.product inside div.cart if the checkbox inside div.product is checked. But since there are multiple div.product on the page i am unable to achieve this. I only want to append the div.product in which the checkbox is checked. My HTML is as shown :

<div class="product-list">
<div class="product earrings"> 
<div class=" product-info"> Product 1 </div>
<input type="checkbox" name=" E45" value="1000">
</div>

<div class="product bracelets"> 
<div class=" product-info"> Product 2 </div>
<input type="checkbox" name="E46" value="1000">
</div>

<div class="product rings"> 
<div class=" product-info"> Product 3 </div>
<input type="checkbox" name="E47" value="1000">
</div>
</div>

<div class="cart">
</div>

#2

Hey there!
It is possible, but it will be a shift in mindset and development paradigm. What you are used to, right now, is that only one unique ID corresponds to one element and that is what you shift around.

However, there is a better way, that works for a variable amount of elements, we can automate that, without using the id attribute.

What you want is to think about state and which data has to be displayed where.
So given your example, you have an array of products:

let products = [
    {
        name: 'Product 1',
        selected: false,
        price: 10.5,
    },
    {
        name: 'Product 2',
        selected: false,
        price: 4.5,
    },
    {
        name: 'Product 3',
        selected: false,
        price: 5,
    },
]

Feel free to extend your product with whatever properties you need.

So what we need to do, is to read out the checked state of an input associated with the product and keep it in sync with the correct products selected property.

Front-end frameworks such as VueJS make this very easy, compared to vanilla JS, because keeping state in sync with the DOM is a difficult task. If you want to make it render efficiently, you should also avoid using setting innerHTML directly, but for our example, it is okay. The right way is to use document.createElement but that is too cumbersome to do manually.

The HTML

Straightforward, if we use JS to populate the cart and products, all we need is a container:

<h2>Products</h2>
<div class="products"></div>

<h2>Cart</h2>
<div class="cart"></div>

The templates

So you want to re-use a snippet of HTML for your product, that you populate with the state of your product object.

Product

<div class="product product-${index}"> 
    <div class="product-info">${product.name} - ${product.price} $</div>
    <input type="checkbox" ${product.selected ? 'checked' : ''}>
</div>

All your products variables + the array index are available here. This gets populated when rendering.

The hard part is about the eventlisteners. You need to listen for changes to the checkbox element for each product and then re-render the products and the card accordingly.

I created a simple demo on codepen:

If you want to read about the problem full in-depth, I wrote about this problem with your example: https://happy-css.com/articles/component-oriented-ui-webdevelopment-with-vanilla-js/


#3

Thankyou @MartinMuzatko i will try this but at the moment i cannot change the entire html for the page. But i know the approach you mentioned is how an expert coder will approach this issue. I will go through this will definatley learn alot. But for now i have to stick with the current format.

I have comeup with a solution for now and its working : http://jsfiddle.net/gcomm/o2xhabwL/


#4

I’m curious - what are your options and why does it not work out like described?
Is my assumption correct, that you first render your list of products via some PHP cart software?
Woocommerce? Magento? Whatever?

I guess you don’t have that much access to the data itself but just define the template for one product - right?
In this case, it would be very interesting in what data format you would be able to get the products.
Picking through the DOM to obtain the data is very inefficient .

Hit reply and let me know :slight_smile:


#5

I do have access to the entire code. But i cannot make such changes are there are ads running to the webpage in question. No i am not using magento or anything. All products and prices and images are in html and it is basically a one page shop with pricing calculations done in jquery.

However i still need help with something, as you can see in my fiddle that check checkbox is checked the corresponding div.product is added to the div.cart but to remove the div.product from the div.cart i have to uncheck the checkbox from the div.product-list. I am unable to direct uncheck the div.product from the div.cart to remove it.

Basically i want to be able to uncheck the items inside the div.cart and have the removed.

Please have alook at my jsfiddle : http://jsfiddle.net/gcomm/o2xhabwL/21/


#6

But you should be able to get the raw data as JSON array with objects? Or what am I missing.


#7

Martin i donot want to extract raw data i am already getting data to my speadsheet via a zapier integration so that part is taken care of. All in need help with now is the fiddle in mentioned in the last post. Can you recommend anything for that issue or should i open a new topic for that ?