Как удалить один элемент с помощью jquery?

<div class="cart-product">
                    <div class="cart_product-layout">
                        <div class="cart_product-layout-del">
                            <div class="delete-product">
                                <i class="fas fa-times"></i>
                            </div>
                        </div>
                        <div class="cat_product-layout-img">
                            <img src="img/category_item/category_item_7.png.png" alt="">
                        </div>
                        <div class="caption">
                            <h3>Цветные розы с ваксфлауэром</h3>
                            <div class="settings">
                                <div class="settings-item">
                                    <span>Кол-во:</span>
                                    <select name="" id="">
                                        <option disabled>1</option>
                                        <option value="Чебурашка">2</option>
                                        <option selected value="Крокодил Гена">3</option>
                                        <option value="Шапокляк">183</option>
                                        <option value="Крыса Лариса">4</option>
                                    </select>
                                </div>
                                <div class="settings-item">
                                    <span>Высота:</span>
                                    <select name="" id="">
                                        <option disabled>180</option>
                                        <option value="Чебурашка">181</option>
                                        <option selected value="Крокодил Гена">182</option>
                                        <option value="Шапокляк">183</option>
                                        <option value="Крыса Лариса">184</option>
                                    </select>
                                </div>
                                <div class="settings-item-price">
                                    <div class="discount">
                                        5000
                                    </div>
                                    <div class="price">
                                        6000 &#8381
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-product">
                    <div class="cart_product-layout">
                        <div class="cart_product-layout-del">
                            <div class="delete-product">
                                <i class="fas fa-times"></i>
                            </div>
                        </div>
                        <div class="cat_product-layout-img">
                            <img src="img/category_item/category_item_7.png.png" alt="">
                        </div>
                        <div class="caption">
                            <h3>Цветные розы с ваксфлауэром</h3>
                            <div class="settings">
                                <div class="settings-item">
                                    <span>Кол-во:</span>
                                    <select name="" id="">
                                        <option disabled>1</option>
                                        <option value="Чебурашка">2</option>
                                        <option selected value="Крокодил Гена">3</option>
                                        <option value="Шапокляк">183</option>
                                        <option value="Крыса Лариса">4</option>
                                    </select>
                                </div>
                                <div class="settings-item">
                                    <span>Высота:</span>
                                    <select name="" id="">
                                        <option disabled>180</option>
                                        <option value="Чебурашка">181</option>
                                        <option selected value="Крокодил Гена">182</option>
                                        <option value="Шапокляк">183</option>
                                        <option value="Крыса Лариса">184</option>
                                    </select>
                                </div>
                                <div class="settings-item-price">
                                    <div class="discount">
                                        5000
                                    </div>
                                    <div class="price">
                                        6000 &#8381
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

$('.delete-product').on('click', function(){
        $('div.cart-product').remove();
    });