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删除为两个

Answer 1

由于它是 next li，因此您可以使用next来获取它，并可以使用add来将它添加到要删除的集合中。更改

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

到

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>

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();
  }
});

使用删除功能同时删除两个li

2 个答案: