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

---

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

我相信问题在于，您的代码中有很多未关闭的

，每一行实际上都在彼此内部。如果你看下面的例子，我已经关闭了div，现在它似乎起作用了

工作演示

jQuery（document）.on（'change'，'select.subject'，函数（e）{
var nearest_row=$（this.nearest（'div.row'）；
if（$（最近的_行）。next（'.row'）。find（“select”）。length==0）{
$（最近的_行）。下一步（）.remove（）；
}
});

学生
主题
挑选
数学
科学类
主题
主题
学生
主题
挑选
数学
科学类
主题
主题
谢谢，但在演示中，如果我更改下拉列表值，它仍然会删除其他学生和科目div，但我尝试的是删除与当前学生相关的所有科目，这些行不是子行，但如果它是子行，我必须说，我想删除所有的子行student@user3653474现在试试这个演示，看看它是否能像你想要的那样工作。它一次删除一行。我可以一次删除一行吗。
jQuery(document).on('change', '.subject', function(e) {
  var nearest_row = $(this).closest('div.row');
  $(nearest_row).next().remove();
});