Jquery удалить конкретный div без идентификатора

Мне нужно удалить с помощью jquery один div с именем класса 'form-group', третий div 'form-group' в моей форме.

Проблема в том, что существует несколько div с одним и тем же классом.

<div class = "form-group header-group-0" id = "form-group-ordersdetail">
<div class = "col-sm-12">
    <div id = "panel-form-ordersdetail" class = "panel panel-default">
        <div class = "panel-heading">
            <i class = "fa fa-bars"></i> Orders Detail
        </div>
            <div class = "panel-body">
                <div class = "row">
                    <div class = "col-sm-10">
                        <div class = "panel panel-default">
                            <div class = "panel-heading"><i class = "fa fa-pencil-square-o"></i> Formulaire</div>
                                <div class = "panel-body child-form-area">
                                    <div class = "form-group">
                                    </div>
                                    <div class = "form-group">
                                    </div>
                                    <div class = "form-group">
                                        This div is to remove
                                    </div>
                                    <div class = "form-group">
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>                  
</div>

Был бы признателен за ваш опыт.

Заранее спасибо, ура, Марк

jquery html

21.11.2018 04:50

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте псевдо-селектор nth-child(3), чтобы выбрать третий .form-group в своем контейнере:

$('.form-group:nth-child(3)').remove();

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "form-group header-group-0" id = "form-group-ordersdetail">
  <div class = "col-sm-12">
    <div id = "panel-form-ordersdetail" class = "panel panel-default">
      <div class = "panel-heading">
        <i class = "fa fa-bars"></i> Orders Detail
      </div>
      <div class = "panel-body">
        <div class = "row">
          <div class = "col-sm-10">
            <div class = "panel panel-default">
              <div class = "panel-heading"><i class = "fa fa-pencil-square-o"></i> Formulaire</div>
              <div class = "panel-body child-form-area">
                <div class = "form-group">
                </div>
                <div class = "form-group">
                </div>
                <div class = "form-group">
                  This div is to remove
                </div>
                <div class = "form-group">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Обратите внимание, что нет никакой необходимости включать большую библиотеку, такую как jQuery, для чего-то настолько простого, вы можете очень легко добиться этого с помощью vanilla JS:

document.querySelector('.form-group:nth-child(3)').remove();

Спасибо вам обоим! Он работает как положено. Предложение CertainPerformance является разумным, поскольку оно экономит ресурсы.

— 21.11.2018 05:12

21.11.2018 04:51

Вы можете использовать метод eq(n) для блоков form-group, чтобы удалить желаемый блок. См. Ниже фрагмент кода

Документация по API jQuery eq (n)

$(function(){
  $("#panel-form-ordersdetail .panel-body.child-form-area .form-group:eq(2)").remove();
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "form-group header-group-0" id = "form-group-ordersdetail">
<div class = "col-sm-12">
    <div id = "panel-form-ordersdetail" class = "panel panel-default">
        <div class = "panel-heading">
            <i class = "fa fa-bars"></i> Orders Detail
        </div>
            <div class = "panel-body">
                <div class = "row">
                    <div class = "col-sm-10">
                        <div class = "panel panel-default">
                            <div class = "panel-heading"><i class = "fa fa-pencil-square-o"></i> Formulaire</div>
                                <div class = "panel-body child-form-area">
                                    <div class = "form-group">
                                    </div>
                                    <div class = "form-group">
                                    </div>
                                    <div class = "form-group">
                                        This div is to remove
                                    </div>
                                    <div class = "form-group">
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>                  
</div>

21.11.2018 04:55

Другие вопросы по теме

Проверить вводимый HTML с помощью JavaScript

JQuery .on ('load') работает для одной функции, но не для другой

Wrapped выбирает тесты на разрушение сумерек

Относительный путь ASP.net нарушен после публикации

Как мне отобразить сообщение, если mysql не возвращает результат или пусто

Как динамически сделать выбранный цвет темнее

Неопознанный индекс PHP при получении данных SQL

Значение от переключателя до int и вычислить

MaterializeCSS объединяет меню с множественным выбором вместе

Открыть элементы списка как новый оверлей

Jquery удалить конкретный div без идентификатора

Ответы 2

Другие вопросы по теме

Похожие вопросы