mrbagfreeman
@mrbagfreeman
Начинающий быдло кодер

Как удалить один элемент с помощью 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>

Мне нужно удалить один элемент .cart-product
$('.delete-product').on('click', function(){
        $('div.cart-product').remove();
    });

При нажатии на кнопку удаляется все дерево, а нужно только один элемент. Понимаю что задача элементарная, но так как мало опыта я не могу правильно сформулировать вопрос в гугле.
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ответы на вопрос 1
Eridani
@Eridani
Мимо проходил
Ну естессна. Вы же удаляемом объекте поставили класс, который имеет не один элемент, а множество, соответсветнно, он всю коллекцию и удаляет.
.cart-product:eq(индекс элемента)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы