incorrect array push and splice?

Question

I am making an invite system. I am using ajax to load a list of search results. When an li is clicked I push the user's id into an array and append a checkmark to the li to let them know they were added to the list.

The push is working but the splice is not. Also when the list is empty the submit button does not return to its disabled state and original styling.

Lastly, when I search again (re-calling the ajax) it removes the appended checkmark. Is there a way with javascript to store which user was click on and retain the appended checkmark when they search for another name?

(^ when i load the results with ajax i check if a person is invited or not in my db i could do it so if they are already invited a click would delete from table..if not on li click i insert with an ajax and setTimeout on success.. do you think that would be a bad practice?)

Below is my html && script

HTML
<li class='inviteUser'>
    <img src='$usersProfilePhoto' alt=''>
    <h2>$usersname</h2>
    <input type='hidden' value='$otherUserID'>
    <span></span>
</li>


$(function(){

    var inviteList = new Array();

      $(document).on('click', '.inviteUser', function(){

          var inviteUserID = $(this).children('input').val();

          inviteList.push(inviteUserID)

          $(this).children('span').append("<p class='remove'>&#x2713;</p>");

          if(inviteList.length > 0) {

              document.getElementById('imcSubmitButton').disabled = false;
              $('#imcSubmitButton').css({'opacity':'1'});

          } else {

              document.getElementById('imcSubmitButton').disabled = true;
              $('#imcSubmitButton').css({'opacity':'0.25'});
          }

      });

      $(document).on('click', '.remove', function() {

          inviteList.splice($(this).index(), 1);

          $(this).remove();

      });

});

The return value of the push method is not if the push was successfull. It returns the new length of the array. Are you aware of that? — Joshua K, Oct 27 '17 at 22:43
`$('.remove').on(` adds the click eventhandler to ALL existing `.remove` elements. So first click creates an remove element and asisgns the click handler. Second click it creates a new remove-element and adds one handler to both existing remove-elements. So the first created one now has two handlers. Same with `$('#imcSubmitButton').on(` That's the reason why you get multiple outputs. the handler is assigned multiple times to the same remove-elements. — Joshua K, Oct 27 '17 at 22:45
Since you're creating `.remove` elements dynamically, you should use event delegation to bind the handler, just like you did for `.inviteUser`. — Barmar, Oct 27 '17 at 22:53
You need to swap the order of `.remove()` and `.splice()`. You can't get the index of a removed element. — Barmar, Oct 27 '17 at 22:54
@Barmar I fixed my script and rearranged and the remove is now not working leading me to believe that my $(this).index() for the splice is not correct. any thoughts? — Ryne, Oct 27 '17 at 23:12

Barmar · Accepted Answer · 2017-10-28T00:01:05.960

1

The problem is that the indexes in inviteList don't correspond to indexes in the HTML. You should search for the element in inviteList that contains this item's userID, and splice that out.

  $(document).on('click', '.remove', function() {
      var userid = $(this).parent().siblings("input").val();
      var index = inviteList.indexOf(userid);
      if (index != -1) {
        inviteList.splice(index, 1);
      }
      $(this).remove();
  });

To solve your problem with remembering which users were invited, the code that processes the AJAX responsee can use:

if (inviteList.indexOf(userId) != -1) {
    // Add checkmark
}

Things would be easier if inviteList were an object rather than array, using userids as keys.

edited Oct 28 '17 at 00:01

answered Oct 27 '17 at 23:18

Barmar

741,623
53
500
612

I tried that and a few other things and couldn't get the splice to work or the checkmark to remove() .. at this point i might as well just do an ajax that inserts or deletes on 'li' click similar to how a like system works.. – Ryne Oct 27 '17 at 23:46
It would help if you posted the HTML. Maybe `.inviteUser` is not the `
`.

Barmar

Oct 27 '17 at 23:49

i edited the html in there. the li is the class though..btw thank you for taking the time to help me out – Ryne Oct 27 '17 at 23:54

Oh, I see the problem. You're deleting things from `inviteList`, but not removing the corresponding `

`. So the indexes don't generally match up.

– Barmar Oct 27 '17 at 23:56

incorrect array push and splice?

1 Answers1