event not firing after some clicks

user_9795265 0
Viewed 27

i don't understand after certain clicks add element is not firing , it just stops, my count variables are working fine but don't know what seems to be the issue here,

 $(document).on('click','.add-role-btn',function(e){
                    console.log('working')
                    if (add_count < 3){
                        $('.role-name-container').append(
                            $('<input type="text" name="role_name" class="form-control mt-3" placeholder="Role name">')
                        )
                     }
                     add_count += 1;
                    
    
                })

            $(document).on('click','.delete-role-btn',function(e){
                console.log('working')
                let last_elem = $('.role-name-container').children().last();
                
                if ($('.role-name-container').first().not(last_elem))
                {
                    last_elem.remove()
                }
                add_count -= 1;

               
                
            })
jquery javascript
1 Answers

I think you should only manipulate the add_count variable, if you add an element or delete it. Like this:

$(document).on("click", ".add-role-btn", function (e) {
  console.log("working");
  if (add_count < 3) {
    $(".role-name-container").append(
      $(
        '<input type="text" name="role_name" class="form-control mt-3" placeholder="Role name">'
      )
    );
    add_count += 1;
  }
});

$(document).on("click", ".delete-role-btn", function (e) {
  console.log("working");
  let last_elem = $(".role-name-container").children().last();

  if ($(".role-name-container").first().not(last_elem)) {
    last_elem.remove();
    add_count -= 1;
  }
});
user_148705870
Related