Удалить ближайший элемент Li с помощью jquery

Question

Я хочу удалить ближайший элемент Li после нажатия кнопки с помощью jquery.I пытался, но не смог это сделать. Я объясняю свой код ниже.

index.html:

$(document).ready(function() { 
 
    $('#Expadd').click(function() { 
 
     $.getScript("js/bootstrap-filestyle.min.js"); 
 
     $('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' id='expcerti'></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>"); 
 
     $('#Expadd').css('display', 'none'); 
 
     $('#Expminus').css('display', 'block'); 
 
    }); 
 
    $('#Expminus').live('click', function() { 
 
     console.log('delete'); 
 
     $(this).closest(".li").remove(); 
 
    }); 
 
});

<ol id="expOl"> 
 
    <li> 
 
     <div class="totalaligndiv"> 
 
      <div class="col-md-10 padding-zero bannerimagefilenew bmargindiv1"> 
 
       <input type="file" class="filestyle" data-size="lg" name="expcerti" id="expcerti"> 
 
      </div> 
 
      <div class="col-md-2 padding-zero bmargindiv1"> 
 
       <button type="button" class="btn btn-success btn-sm" id="Expadd">+</button> 
 
       button type="button" class="btn btn-danger btn-sm" id="Expminus" style="display:none;">-</button> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
     </div> 
 
    </li> 
 
</ol>

Здесь мое требование изначально поле файла и + кнопка пользователь visible.When щелкнет в этом + кнопки того же типа поле будет создано ниже предыдущего поля, а предыдущее поле + будет заменено на кнопку -.Когда пользователь нажмете на кнопку - все поле файла, соответствующее тому, что - должно удалить, что не может произойти. Мне также нужно, когда пользователь нажмет на кнопку + нового созданного файла, еще один созданный файл будет создан и т. д. Здесь я не могу удалить и создать больше полей после создания первого. Пожалуйста, помогите мне решить эту проблему.

Answer 1

Try ниже фрагмент кода, как .live является depracated начиная с версии 1.7 (и вы используете 1.9), используйте .он:

$('.btn-danger').on('click', function() { 
      console.log('delete'); 
      $(this).closest("li").remove(); //// Here it should be "li" insteda of ".li" 
     }); 

Обновление: -

Вам нужно селектор класса, как идентификатор должен быть уникальный. И для динамически создаваемых кнопок используйте код ниже:

$(document).on('click','.btn-success', function() { 

}); 

Всего код:

$(document).ready(function() { 
     $(document).on('click','.btn-success', function() { 

      $.getScript("js/bootstrap-filestyle.min.js"); 
      $('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' id='expcerti'></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>"); 
      $(this).css('display', 'none'); 
       $(this).siblings("button.btn-danger").css('display', 'block'); 
     }); 
     $(document).on('click','.btn-danger', function() { 
      console.log('delete'); 
      $(this).closest("li").remove(); 
     }); 
    }); 

Демо:

http://jsfiddle.net/Rj9bR/50/

Answer 2

Поскольку ваш комментарий говорит, что вы используете 1.9.1 Jquery версии вы должны использовать on()

Ваш DOM не содержит li с классом li Вам просто нужно

$(this).closest("li").remove() 

$('#expOl').on('click', '#Expminus',function() { 
    $(this).closest("li").remove(); 
} 

Update

Разрешение для вашей второй проблемы:

Как я упоминал ниже в примечании, вы повторяете элементы DOM, и вы используете селектор идентификаторов, он не будет нацелен на элемент, который вы ожидаете, вам нужно использовать селектора классов.

EX:

$('.expOl').on('click', '.btn-danger',function() { // Used class as selector 
    $(this).closest("li").remove(); 
} 

разметки

<ol class="expOl"> 
    <li> 
     <div class="totalaligndiv"> 
     <div class="col-md-10 padding-zero bannerimagefilenew bmargindiv1"> 
      <input type="file" class="filestyle" data-size="lg" name="expcerti" id="expcerti"> 
     </div> 
     <div class="col-md-2 padding-zero bmargindiv1"> 
      <button type="button" class="btn btn-success btn-sm" id="Expadd">+</button> 
      <button type="button" class="btn btn-danger btn-sm" id="Expminus" style="display:none;">-</button> 
     </div> 
     <div class="clearfix"></div> 
     </div> 
    </li> 
</ol> 

Примечание: Таргетинг идентификаторов Поскольку вы повторяющийся DOM элемент Не используйте ID, используйте класс в качестве селекторов потому что идентификаторы должны быть уникальными.

Answer 3

Изменить сценарий к

<script> 
$(document).ready(function() { 
     $('#exp01').on('click','.addBtnClass',function() { //add class to btn on which you add li 
      //add li to exp01 as you already done 
      $('#Expadd').css('display', 'none'); 
      $('#Expminus').css('display', 'block'); 
     }); 
     $('#exp01').on('click','.classRemove', function() { //add class to btn used for removing li 
      console.log('delete'); 
      $(this).closest(".li").remove(); 
     }); 
    }); 
</script> 

Поскольку у вас есть кнопка добавления внутри элемента ol, она также динамична. Также подтвердите, что вы не удаляете все элементы из ol.