时间戳

首页 > 解决方案 > 如何仅删除特定类jquery的第一组div

javascript - 如何仅删除特定类jquery的第一组div

问题描述

我有这样的html结构：

  <div class="row clearfix student">
          <div class="col-sm-3">
            <div class="form-group">
              <h2 class="card-inside-title">Student</h2>
              <div class="form-line focused">
                <input type="text" name="name" class="form-control" required="">
              </div>
            </div>
          </div>
 <div class="col-sm-3">
            <div class="form-group">
            <h2 class="card-inside-title">Subject</h2>
            <select name="subject_name" class="form-control subject" required="" aria-invalid="false"> 
                                        <option value="">Select</option>
                                        <option value="1">Maths</option>
                                        <option value="2">Science</option>
          </select>
        </div>
        </div>
        <div>
        
        <div class="row clearfix subject">
          <div class="col-sm-3">
            <div class="form-group">
              <h2 class="card-inside-title">Subject</h2>
              <div class="form-line focused">
                <input type="text" name="subject[]" class="form-control" required="">
              </div>
            </div>
          </div>
        <div>
        
        <div class="row clearfix class">
          <div class="col-sm-3">
            <div class="form-group">
              <h2 class="card-inside-title">Subject</h2>
              <div class="form-line focused">
                <input type="text" name="subject[]" class="form-control" required="">
              </div>
            </div>
          </div>
        <div>
        
        
        <div class="row clearfix student">
          <div class="col-sm-3">
            <div class="form-group">
              <h2 class="card-inside-title">Student</h2>
              <div class="form-line focused">
                <input type="text" name="name" class="form-control" required="">
              </div>
            </div>
          </div>

<div class="col-sm-3">
            <div class="form-group">
            <h2 class="card-inside-title">Subject</h2>
            <select name="subject_name" class="form-control subject" required="" aria-invalid="false"> 
                                        <option value="">Select</option>
                                        <option value="1">Maths</option>
                                        <option value="2">Science</option>
          </select>
        </div>
        </div>
        <div>
        <div>
        
        <div class="row clearfix subject">
          <div class="col-sm-3">
            <div class="form-group">
              <h2 class="card-inside-title">Subject</h2>
              <div class="form-line focused">
                <input type="text" name="subject[]" class="form-control" required="">
              </div>
            </div>
          </div>
        <div>
        
        <div class="row clearfix class">
          <div class="col-sm-3">
            <div class="form-group">
              <h2 class="card-inside-title">Subject</h2>
              <div class="form-line focused">
                <input type="text" name="subject[]" class="form-control" required="">
              </div>
            </div>
          </div>
        <div>
        ..
        ..

有一个学生行和多个主题行。学生行上有一个下拉列表，所以我想要的是仅在更改下拉列表时删除主题行。我正在使用此代码，但它不起作用。

jQuery(document).on('change', '.subject', function(e) {
  var nearest_row = $(this).closest('div.row');
  $(nearest_row).next().remove();
});

我不想删除学生，只删除该学生的科目行。

标签： javascripthtmljquery

解决方案

我认为问题在于您<div>的代码中有很多未封闭的内容，每一行实际上都在彼此内部。如果你看下面的例子，我已经关闭了 div，现在它似乎可以工作了。

工作演示

jQuery(document).on('change', 'select.subject', function(e) {
  var nearest_row = $(this).closest('div.row');
  if ($(nearest_row).next('.row').find("select").length == 0) {
    $(nearest_row).next().remove();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row clearfix student">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Student</h2>
      <div class="form-line focused">
        <input type="text" name="name" class="form-control" required="">
      </div>
    </div>
  </div>
</div>
<div class="row clearfix subject">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Subject</h2>
      <select name="subject_name" class="form-control subject" required="" aria-invalid="false">
        <option value="">Select</option>
        <option value="1">Maths</option>
        <option value="2">Science</option>
      </select>
    </div>
  </div>
</div>
<div class="row clearfix subject">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Subject</h2>
      <div class="form-line focused">
        <input type="text" name="subject[]" class="form-control" required="">
      </div>
    </div>
  </div>
</div>

<div class="row clearfix class">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Subject</h2>
      <div class="form-line focused">
        <input type="text" name="subject[]" class="form-control" required="">
      </div>
    </div>
  </div>
</div>


<div class="row clearfix student">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Student</h2>
      <div class="form-line focused">
        <input type="text" name="name" class="form-control" required="">
      </div>
    </div>
  </div>
</div>
<div class="row clearfix subject">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Subject</h2>
      <select name="subject_name" class="form-control subject" required="" aria-invalid="false">
        <option value="">Select</option>
        <option value="1">Maths</option>
        <option value="2">Science</option>
      </select>
    </div>
  </div>
</div>

<div class="row clearfix subject">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Subject</h2>
      <div class="form-line focused">
        <input type="text" name="subject[]" class="form-control" required="">
      </div>
    </div>
  </div>
</div>

<div class="row clearfix class">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Subject</h2>
      <div class="form-line focused">
        <input type="text" name="subject[]" class="form-control" required="">
      </div>
    </div>
  </div>
</div>

推荐阅读