使用remove函数同时删除两个li元素

Question

我有一个按钮在我的li中，允许用户删除该li。 我希望使用同一个按钮来删除此父级li以及下一个li。

$('body').on('click', '.myform .cf-delete', function(e) {
  var confirm_delete = confirm("Are you sure you want to delete?");
  if (confirm_delete) {
    $(this).parent().remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myform">
  <ul>
    <li class="ui-state-default">
      <span class="cf-delete"><i class="icon-close"></i></span>
    </li>
    <li class="ui-state-default-optionprix">
    </li>
    <li class="ui-state-default">
      <span class="cf-delete"><i class="icon-close"></i></span>
    </li>
    <li class="ui-state-default-optionprix">
    </li>
    <li class="ui-state-default">
      <span class="cf-delete"><i class="icon-close"></i></span>
    </li>
    <li class="ui-state-default-optionprix"></li>
    </li>
  </ul>
</div>

也许我可以同时将下一个“ui-state-default-optionprix”作为目标删除，或者我们可以一次性删除两个li

- WolwX

---

请查看 next https://api.jquery.com/next/ - Dorvalla

Answer 1

由于它是下一个li，您可以使用next来获取它，并使用add将其添加到您要删除的集合中。改变

$(this).parent().remove();

to

var lis = $(this).parent();
lis.add(lis.next()).remove();

如果你想仅在下一个元素有 ui-state-default-optionprix 类的情况下移除它，可以将其添加到 next（这将包含下一个元素[如果它有该类]或为空[如果没有];next 不会向前扫描以寻找匹配项，它只查看下一个元素）：

var lis = $(this).parent();
lis.add(lis.next(".ui-state-default-optionprix")).remove();

实时示例：

$('body').on('click', '.myform .cf-delete', function(e) {
  var confirm_delete = confirm("Are you sure you want to delete?");
  if (confirm_delete) {
    var lis = $(this).parent();
    lis.add(lis.next(".ui-state-default-optionprix")).remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myform">
  <ul>
    <li class="ui-state-default">
      ui-state-default
      <span class="cf-delete"><i class="icon-close">[X]</i></span>
    </li>
    <li class="ui-state-default-optionprix">
    ui-state-default-optionprix
    </li>
    <li class="ui-state-default">
      ui-state-default
      <span class="cf-delete"><i class="icon-close">[X]</i></span>
    </li>
    <li class="ui-state-default-optionprix">
    ui-state-default-optionprix
    </li>
    <li class="ui-state-default">
      ui-state-default
      <span class="cf-delete"><i class="icon-close">[X]</i></span>
    </li>
    <li class="ui-state-default-optionprix">
    ui-state-default-optionprix
    </li>
  </ul>
</div>

或者

$(this).parent()
    .next(".ui-state-default-optionprix")
    .remove()
    .end()
    .remove();

如果你喜欢这种东西的话，可以考虑使用它。 :-)

实时演示:

$('body').on('click', '.myform .cf-delete', function(e) {
  var confirm_delete = confirm("Are you sure you want to delete?");
  if (confirm_delete) {
    $(this).parent()
        .next(".ui-state-default-optionprix")
        .remove()
        .end()
        .remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myform">
  <ul>
    <li class="ui-state-default">
      ui-state-default
      <span class="cf-delete"><i class="icon-close">[X]</i></span>
    </li>
    <li class="ui-state-default-optionprix">
    ui-state-default-optionprix
    </li>
    <li class="ui-state-default">
      ui-state-default
      <span class="cf-delete"><i class="icon-close">[X]</i></span>
    </li>
    <li class="ui-state-default-optionprix">
    ui-state-default-optionprix
    </li>
    <li class="ui-state-default">
      ui-state-default
      <span class="cf-delete"><i class="icon-close">[X]</i></span>
    </li>
    <li class="ui-state-default-optionprix">
    ui-state-default-optionprix
    </li>
  </ul>
</div>

- T.J. Crowder

---

这个问题解释得非常好。 - Dorvalla

非常好的解释，谢谢。这是一个很好的方法，但在我的项目中不起作用，所以我使用了两个remove的组合：$(this).parent().next(".ui-state-default-optionprix").remove(); $(this).parent().remove(); - WolwX

Answer 2

您可以先删除下一个 li，然后再删除初始父元素。

$('body').on('click', '.myform .cf-delete', function(e) {
  var confirm_delete = confirm("Are you sure you want to delete?");
  if (confirm_delete) {
    $(this).parent().next().remove();
    $(this).parent().remove();
  }
});

- Cata John

---

谢谢，这很简单并且运行得很好 :) $(this).parent().next(".ui-state-default-optionprix").remove(); $(this).parent().remove(); - WolwX