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

Question

[Александр Горкин]

Есть такое дерево:

<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>

Мне нужно удалить один элемент .cart-product

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

При нажатии на кнопку удаляется все дерево, а нужно только один элемент. Понимаю что задача элементарная, но так как мало опыта я не могу правильно сформулировать вопрос в гугле.

Comments

[S-a-n-d-r-0]

Костыльный вариант:

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

А лучше при создании каждого элемента с классом cart-product ставить у него какой-нибудь собственный атрибут с уникальным значением. И этот же атрибут ставить у его кнопки удаления. Потом по клику на кнопку вы сможете взять у нее этот атрибут и селектором найти соответствующий ему контейнер с этим же аттрибутом.

Answer 1

[Антон]

Ну естессна. Вы же удаляемом объекте поставили класс, который имеет не один элемент, а множество, соответсветнно, он всю коллекцию и удаляет.
.cart-product:eq(индекс элемента)

А вообще, советую почитать про выборку элементов в jquery

Comments

[Александр Горкин]

Примерно как это можно реализовать?

[Антон]

Александр Горкин, я вам уже его дал, смотрите внимательнее