CODEWITHSUNDEEP
jqueryhtml
satya
satya

Reputation: 3560

Remove nearest Li element using jquery

I want to remove nearest Li element after click on a button using jquery.I tried but unable to do this.I am explaining my code below.

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>

Here my requirement is initially the file field and + button will visible.When user will click in this + button the same type field will created below the previous field and the previous field + button will replaced with - button.When user will click on the that - button the entire file field corresponding to that - should remove which can not happen.I need also when user will click on + button of new created file again another filed will create and so on.Here i can not remove and create more field after creating first one.Please help me to resolve this issue.

Upvotes: 1

Views: 4102

Answers (3)

Neel
Neel

Reputation: 11721

Try below piece of code as .live is depracated since version 1.7(and you are using 1.9), use .on :

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

Update:-

You need class selector as id must be unique. And for dynamically generated buttons use below code:

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

});

Whole code:

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

Demo:

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

Upvotes: 4

Chaitanya Gadkari
Chaitanya Gadkari

Reputation: 2787

Change your script to 

<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>

As you have add button also inside ol element, it is also dynamic. Also validate you do not remove all elements from ol.

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Since your comment says you're using 1.9.1 jquery version you need to use on()

Your DOM doesn't contain any li with class li You just need 

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

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

Update

Resolution for your second issue:

As i mentioned below in the note, you have repeating DOM elements and you're using ID selector, It'll not target the element you expect, you need to use class selectors.

EX:

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

markup

<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>

Note: You're targeting IDs Since you have repeating DOM element Don't use ID, use class as selectors because IDs must be unique.

Upvotes: 0

Related Questions