Question

 <ul>
    <li>
         <select id="selectbasic" name="selectbasic" class="form-control"> 
         <option value="46_34" selected="selected">10X20</option>                                                                   
         <option value="47_24">10X18</option>
         <option value="48_25">10X15</option></select>
   </li>
   <li>
        <select id="selectbasic" name="selectbasic" class="form-control **changed**">
        <option value="49_32" selected="selected">1-40</option>
        <option value="50_31">1-20</option></select>
   </li>
   <li>
        <select id="selectbasic" name="selectbasic" class="form-control">
        <option value="51_26" selected="selected">Glossy</option>
        <option value="52_27">Matte</option></select>
   </li>
</ul>

此处通过以下代码更改相应选择框的值后，仅将类名“已更改”添加到其中。

$('select').on("change", function () {
  $(this).addClass("changed");
});

更改值后，我需要删除“li”的以下“li”块，其中包含“select”，类别为“已更改”。在上述情况下，最后一个“li”块。如何实现此目的。我试过了

$('.changed').parent().siblings().after().remove();

但它也删除了上面的'li'。

Answer 1

试试这个

$('.changed').parent().next().remove();

Answer 2

您可以使用

$('.changed').closest("li").remove();

这将删除包含类名changed

的元素的li

closest()方法将获取其中指定的父元素。

修改

如果要删除下一个li，则需要使用

$('.changed').closest("li").next().remove();

Answer 3

这将删除最后一个li元素。

$('li:last').remove();

Answer 4

$('select').on("change", function () {
  $(this).addClass("changed");
  $('.changed').parents("li:first").next().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
         <select id="selectbasic" name="selectbasic" class="form-control"> 
         <option value="46_34" selected="selected">10X20</option>                                                                   
         <option value="47_24">10X18</option>
         <option value="48_25">10X15</option></select>
   </li>
   <li>
        <select id="selectbasic" name="selectbasic" class="form-control **changed**">
        <option value="49_32" selected="selected">1-40</option>
        <option value="50_31">1-20</option></select>
   </li>
   <li>
        <select id="selectbasic" name="selectbasic" class="form-control">
        <option value="51_26" selected="selected">Glossy</option>
        <option value="52_27">Matte</option></select>
   </li>
</ul>

你必须做

$('.changed').parents("li:first").next().remove();

这将删除包含类名已更改的元素的li

Answer 5

试试这个

$("body").on("click",".changed", function(e){ 
            $(this).parentsUntil('.yourclass').remove();   
    });

如何使用jquery

5 个答案: