Remove two li at the same time with remove function

Question

I have a button into my li who permit remove this li when used I wish to use the same button to remove this parent li and both the next 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>

So perhaps I can target the next "ui-state-default-optionprix" to be delete at the same time, or perhaps we can delete two li by two

Answer 1

Since it's the next li, you can use next to get it and add to add it to the set you're removing. Change

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

to

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

If you want to remove the next element only if it has the class ui-state-default-optionprix, add that to the next (which will then either contain the next element [if it has the class] or be empty [if it doesn't]; next does not scan forward looking for a match, it only looks at the one next element):

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

Live Example:

$('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>

Or

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

...if you like that kind of thing. :-)

Live Example:

$('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>