Question

我需要使用jquery删除类名称为“ form-group”的一个div，即表单中的第三个“ form-group”的div。

问题是有多个div具有相同的类。

{{1}}

将感谢您的专业知识。

预先感谢您，马克，马克

Answer 1

使用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之类的大型库，您可以使用香草JS轻松实现它：

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

Answer 2

您可以对eq(n)的div使用form-group方法来删除所需的div。参见下面的代码段

jQuery eq(n) API documentation

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

jQuery删除没有ID的特定div

2 个答案: