Question

我想删除所有类，其中class是form-group WHEN选择在当前select元素之后更改。这是我的JS：

$(document).ready(function() {
  $("select").on('change', function() {
    this_value = this.value;
    this_name = $(this).attr('name');
    this_id = $(this).attr('id');

    $(this).nextAll("div[class=form-group]").andSelf().remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="card_order_form">
  <div class="container" id="card_order_form_container">
    <h2>Kart Sifarişi</h2>
    <div class="form-group">
      <label for="currency"><b>Valyuta</b></label>
      <select class="form-control" id="currency" name="currency">
        <option value="">-- Birini Seçin --</option>
        <option value="1">AZN</option>
        <option value="2">USD</option>
        <option value="3">EUR</option>
      </select>
    </div>

    <div class="form-group">
      <label for="currency_2"><b>Valyuta</b></label>
      <select class="form-control" id="currency_2" name="currency">
        <option value="">-- Birini Seçin --</option>
        <option value="1">AZN</option>
        <option value="2">USD</option>
        <option value="3">EUR</option>
      </select>
    </div>
  </div>
</form>

然而，它不会删除下一个div。

Answer 1

问题是由于DOM遍历逻辑不正确; .form-group元素不是引发事件的select的兄弟，因此nextAll()将不返回任何内容。只有andSelf()正在做任何事情。

当您删除所有的.form-group元素时，您根本不需要DOM遍历。您可以直接选择它们并将其删除，如下所示：

$(document).ready(function() {
  $("select").on('change', function() {
    this_value = this.value;
    this_name = this.name;
    this_id = this.id;

   $('.form-group').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="card_order_form">
  <div class="container" id="card_order_form_container">
    <h2>Kart Sifarişi</h2>
    <div class="form-group">
      <label for="currency"><b>Valyuta</b></label>
      <select class="form-control" id="currency" name="currency">
        <option value="">-- Birini Seçin --</option>
        <option value="1">AZN</option>
        <option value="2">USD</option>
        <option value="3">EUR</option>
      </select>
    </div>

    <div class="form-group">
      <label for="currency_2"><b>Valyuta</b></label>
      <select class="form-control" id="currency_2" name="currency">
        <option value="">-- Birini Seçin --</option>
        <option value="1">AZN</option>
        <option value="2">USD</option>
        <option value="3">EUR</option>
      </select>
    </div>
  </div>
</form>

现在您已将问题编辑为：

我想删除所有类，其中class是form-group WHEN选择在当前select元素之后更改。

您需要首先获取父.form-group，然后使用nextAll()：

$(document).ready(function() {
  $("select").on('change', function() {
    this_value = this.value;
    this_name = this.name;
    this_id = this.id;

   $(this).closest('.form-group').nextAll().andSelf().remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="card_order_form">
  <div class="container" id="card_order_form_container">
    <h2>Kart Sifarişi</h2>
    <div class="form-group">
      <label for="currency"><b>Valyuta</b></label>
      <select class="form-control" id="currency" name="currency">
        <option value="">-- Birini Seçin --</option>
        <option value="1">AZN</option>
        <option value="2">USD</option>
        <option value="3">EUR</option>
      </select>
    </div>

    <div class="form-group">
      <label for="currency_2"><b>Valyuta</b></label>
      <select class="form-control" id="currency_2" name="currency">
        <option value="">-- Birini Seçin --</option>
        <option value="1">AZN</option>
        <option value="2">USD</option>
        <option value="3">EUR</option>
      </select>
    </div>
  </div>
</form>

Answer 2

这是因为您应该将其应用于.form-group父

＆＃13;

$(document).ready(function() {
  $("select").on('change', function() {
    this_value = this.value;
    this_name = $(this).attr('name');
    this_id = $(this).attr('id');

    $(this).closest(".form-group").nextAll(".form-group").andSelf().remove();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="card_order_form">
  <div class="container" id="card_order_form_container">
    <h2>Kart Sifarişi</h2>
    <div class="form-group">
      <label for="currency"><b>Valyuta</b></label>
      <select class="form-control" id="currency" name="currency">
        <option value="">-- Birini Seçin --</option>
        <option value="1">AZN</option>
        <option value="2">USD</option>
        <option value="3">EUR</option>
      </select>
    </div>

    <div class="form-group">
      <label for="currency_2"><b>Valyuta</b></label>
      <select class="form-control" id="currency_2" name="currency">
        <option value="">-- Birini Seçin --</option>
        <option value="1">AZN</option>
        <option value="2">USD</option>
        <option value="3">EUR</option>
      </select>
    </div>
  </div>
</form>

＆＃13;

Answer 3

尝试closest找到第一个带有表单组类的父div，如下所示：

只需使用$(this).closest('div.form-group').nextAll().andSelf().remove();查找并删除包括其自身的：

＆＃13;
＆＃13;
$(document).ready(function() { $("select").on('change', function() { this_value = this.value; this_name = $(this).attr('name'); this_id = $(this).attr('id'); $(this).closest('div.form-group').nextAll().andSelf().remove(); }); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="card_order_form"> <div class="container" id="card_order_form_container"> <h2>Kart Sifarişi</h2> <div class="form-group"> <label for="currency"><b>Valyuta</b></label> <select class="form-control" id="currency" name="currency"> <option value="">-- Birini Seçin --</option> <option value="1">AZN</option> <option value="2">USD</option> <option value="3">EUR</option> </select> </div> <div class="form-group"> <label for="currency_2"><b>Valyuta</b></label> <select class="form-control" id="currency_2" name="currency"> <option value="">-- Birini Seçin --</option> <option value="1">AZN</option> <option value="2">USD</option> <option value="3">EUR</option> </select> </div> </div> </form>
＆＃13;
＆＃13;
＆＃13;

jquery nextall从中删除所有下一个元素

3 个答案: