Deleting a specified item from a key

[Boy_Wonder]

Todge , Texas

Given that I -think- both of you have done this before, pretty sure you definitely have Texas. Can I have some idea how you'd do this? I need to do similar for a plugin I'm developing privately just for use on my own site and realised that once the characters have gone through bootcamp I need some way to remove them from the list to always keep an accurate count.

I get the feeling it'll be something like on click (This thing) {
delete [ x ]
} 

but I'm not sure beyond that

[Texas]

If, by key, you mean specifically a ProBoards key and not a generic array:

What I've been doing is something like this:

We have an array stored in our key: ['this', 'is', 'a', 'sentence', 'in', 'an', 'array']

We want to get the value at 5. So we pop off the length of the array (7) minus the location (5) plus one (7-5+1 = 3; So, basically, the fifth item from the beginning is the third from the end in this case. You could also just shift 5 items and it would achieve the same thing but the process I explain afterwards would have to be reversed). Then, once we have those, we shift off the first item. If all we're doing is deleting, then after you've done the shift call you can just "push" the items back to the key. Here's an example from a plugin I was just working on.


  delete_cached_post ( index ) {
     let keyLen = ( this.key.get(this.info.user) != undefined)? this.key.get(this.info.user).length: -1;
     if ( index > 5 || index > keyLen || this.key.get(this.info.user) == undefined )
        return false;
     else {
        let poparuski = this.key.pop({object_id: this.info.user, num_items: keyLen - index + 1});
        poparuski.shift();
        this.key.push({
           object_id: this.info.user,
           values: poparuski,
           success:(function(){
              location.reload();
           })
        });
     }
  }


[Boy_Wonder]

Yes I do mean specifically a proboards key xD I'll take a read at that and then try and work out how to make it work in my case

what does 'let' refer to (I see you have let keyLen for example)

[Texas]

Boy_Wonder, sorry, that's EMCA6 syntax. Just ignore it. It's equivalently just 'var' as far as this case is concerned.

[Boy_Wonder]

That's cool! I learnt something else at least XD

[Boy_Wonder]

All right I'm going to be a pest Texas because my mind is really refusing to grasp this -

   $('#submitSelection').on('click',function(){
   var char = {
       name: $('#CharacterName').val(),
       dept: $('#sign-up input[type="radio"][name="Department"]:checked').val()
   }
   if(!Array.isArray(pb.plugin.key('bootCampSignUp').get())){
       pb.plugin.key('bootCampSignUp').set({ value: [char] });
   } else {
       pb.plugin.key('bootCampSignUp').push({ value: char });
   }
});

This is where the key gets set and stuff gets set up

<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a>

This is my button set up to delete an item, I can't work out how to make that button work @_@

((Anyone else can jump on as well))

[Texas]

Boy_Wonder,

A little bit more information would be helpful. For instance, in what way is it currently not working? Probably sounds like a stupid question but I can't help fix a problem if I don't know what it is.

[Boy_Wonder]

Well in my case nothing, as I can't work out how to even remotely set up what I'm trying to do xD

But my first problem is going to be trying to make sure it deletes the right thing that the delete button is linked to.

shieldrpg.net/page/bootcamp

[Texas]

Could I perhaps see the source code of what you're doing? I looked at that page but I couldn't seem to locate it. From the looks of it your basically there, if I could just see the source code it would be easier for me to give you a few tips on where to go from where you are.

[Boy_Wonder]

/*TO-DO
Create a smaller display that can be appended to an area on the front page*/
$(document).ready(function() {
   if (pb.data('route').name == "page" && window.location.href.indexOf("bootcamp") > -1) {
       var welcomeTxt = "Welcome to the bootcamp page! Here you can meet your current instructors, see upcoming bootcamps (and what agents are on them), and finally sign up onto a bootcamp"
       var instructors = "Instructors text will go here"
       $("#welcomeInfo").append("<p>"+welcomeTxt+"</p>");
       $("#instructors").append("<p>"+instructors+"</p>");
       $("#sign-up").append("<h3>Sign Up</h3><p>Fill in the form below to submit your character to the department bootcamp</p><br /><form>Character Name: <input type='text' id='CharacterName' value='Character Name' name='Character Name'><br /> <input type='radio' name='Department' value='Department0' id='department0' > Department 0: The Home Office<input type='radio' name='Department' value='Department1' id='department1'> Department 1: The Power Brokerage <input type='radio' name='Department' value='Department2' id='department2' > Department 2: Military Operations <input type='radio' name='Department' value='Department3' id='department3'> Department 3: Computer Espionage <input type='radio' name='Department' value='Department4' id='department4'> Department 4: Urban Assault <input type='radio' name='Department' value='Department5' id='department5'> Department 5: Black Ops <br /><input type='radio' name='Department' value='Department6' id='department6'> Department 6: Wet Works <input type='radio' name='Department' value='Department7' id='theBasement'> The Basement<br /><input type='submit' id='submitSelection' value='Sign Up'></form>");
       $("#currentBootcampers").append ("<div class='column-three'><h3>Department 0: The Home Office</h3> <p class='dep0Agents'></p></div><div class='column-three'><h3>Department 1: The Power Brokerage</h3><p class='dep1Agents'></p></div><div class='column-three'><h3>Department 2: Military Operations</h3><p class='dep2Agents'></p></div><div class='column-three'><h3>Department 3: Computer Espionage</h3><p class='dep3Agents'></p></div><div class='column-three'><h3>Department 4: Urban Assault</h3><p class='dep4Agents'></p></div><div class='column-three'><h3>Department 5: Black Ops </h3><p class='dep5Agents'></p></div><div class='column-three'><h3>Department 6: Wet Works </h3><p class='dep6Agents'></p></div><div class='column-three'><h3>The Basement</h3><p class='dep7Agents'></p></div><div class='clear-left'></div>");
       
    $('#submitSelection').on('click',function(){
   var char = {
       name: $('#CharacterName').val(),
       dept: $('#sign-up input[type="radio"][name="Department"]:checked').val()
   }
   if(!Array.isArray(pb.plugin.key('bootCampSignUp').get())){
       pb.plugin.key('bootCampSignUp').set({ value: [char] });
   } else {
       pb.plugin.key('bootCampSignUp').push({ value: char });
   }
});
       
       if(pb.plugin.key('bootCampSignUp').get()){
   for(i=0; i < pb.plugin.key('bootCampSignUp').get().length; i++){
       if ( pb.plugin.key('bootCampSignUp').get()[i].dept == "Department0") {
                   $(".dep0Agents").append(pb.plugin.key('bootCampSignUp').get()[i].name);
                 $(".dep0Agents").append("<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a><br class='clear-left'>");
       }
       else if ( pb.plugin.key('bootCampSignUp').get()[i].dept == "Department1") {
                   $(".dep1Agents").append(pb.plugin.key('bootCampSignUp').get()[i].name);
                 $(".dep1Agents").append("<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a><br class='clear-left'>");
       }
       else if ( pb.plugin.key('bootCampSignUp').get()[i].dept == "Department2") {
                   $(".dep2Agents").append(pb.plugin.key('bootCampSignUp').get()[i].name);
                 $(".dep2Agents").append("<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a><br class='clear-left'>");
       }
       else if ( pb.plugin.key('bootCampSignUp').get()[i].dept == "Department3") {
                   $(".dep3Agents").append(pb.plugin.key('bootCampSignUp').get()[i].name);
                 $(".dep3Agents").append("<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a><br class='clear-left'>");
       }
       else if ( pb.plugin.key('bootCampSignUp').get()[i].dept == "Department4") {
                   $(".dep4Agents").append(pb.plugin.key('bootCampSignUp').get()[i].name);
                 $(".dep4Agents").append("<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a><br class='clear-left'>");

       }
       else if ( pb.plugin.key('bootCampSignUp').get()[i].dept == "Department5") {
                   $(".dep5Agents").append(pb.plugin.key('bootCampSignUp').get()[i].name);

                 $(".dep5Agents").append("<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a><br class='clear-left'>");

       }
       
       else if ( pb.plugin.key('bootCampSignUp').get()[i].dept == "Department6") {
                   $(".dep6Agents").append(pb.plugin.key('bootCampSignUp').get()[i].name);
                                      $(".dep6Agents").append("<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a><br class='clear-left'>");    
       }
       else if ( pb.plugin.key('bootCampSignUp').get()[i].dept == "Department7") {
                   $(".dep7Agents").append(pb.plugin.key('bootCampSignUp').get()[i].name);
                           $(".dep7Agents").append("<a href='#' class='deletebutton' id='deletebutton[i]'><i class='fa fa-times' aria-hidden='true'></i></a><br class='clear-left'>");
       
       }
          }
}
   }
});

Sorry its really really long!

[Texas]

Okay, a few things. First, the value of "i" is not getting rendered in the ID section. If you want it to be you need to change it to something like this:

"<a href='' class='' id='deletebutton-" + i + "'>

Second, I'd recomend creating a function that will delete the item at a specific index, then add something like this to your delete link

onclick='deletefunc(" + i + ")'Adding that will call your delete function when you click on the element. 

Also, the code snippet I posted earlier is almost exactly what your delete function should look like.

[Boy_Wonder]

Just change some references is that correct?

[Texas]

Boy_Wonder, exactly. You can feel free to copy and modify as needed.