Jquery - how to remove content dynamically

Question

I have a table with Rows. And i have a soccer field div with Child DIVs for each player!

When i Click on a Row, i have a JQuery Funktion who adds The player into My Field (with a playerID)! After That the picked player is greyed out!

But now i want to remove the player from the Field (dynamically Based on His ID) when i am clicking again on the grey row!

How could i so do something like this without selecting by a Static selector like

$("#goalkeeper").empty();

Here is My fiddle: https://jsfiddle.net/qcvcga8k/30/

Thx for alllll hints ;)

Alex

EDIT: Here is onyl the relevant Code:

Javascript: (the main releveant part is here the is my addGoalkeeperByClickEvent() Function and that I am using "#goalie" as selector, thats why this solution works at the moment, but i want to use always the player who the user clicked) dynamically... but i am talking here only about a solution to remove the player, adding a player is successfully working already...

var GoalKeeperQuantity = 0;
  var DefenderQuantity = 0;
  var MidfielderQuantity = 0;
  var ForwardQuantity = 0;
  var totalPlayersOnField = 0;


  function addGoalkeeperByClickEvent(playerName) {
    $(document).off('click', '.goalKepperRow, .goalKepperRowGrey, .greyRow').on('click', '.goalKepperRow, .goalKepperRowGrey, .greyRow', function() {


      $('#goalkeeperLine div p').first().parent().html("".concat(playerName));

            if ($(this).css("background-color")==="rgb(217, 217, 217)") {
                    $(this).attr('class', 'greyRow');
          GoalKeeperQuantity++;
            totalPlayersOnField++;
          //alert(GoalKeeperQuantity);
            }else{
                    $(this).attr('class', 'goalKepperRow');
          GoalKeeperQuantity--;
            totalPlayersOnField--;
          //alert(GoalKeeperQuantity);


         $("#goalie").empty()
         $("#goalie").html("")


            }


    });
  };




// If the user clicks on the "x", remove the player and subtract the qnt of players
$("#field").on("click", "span.remove", function(e) {
  // remove player from field (means >>> empty the relevant DIV)
  var me = $(this).parent();
  me.empty();

  // add p elemnt to the empty div
  me.html("")
  var title = '';

  // Check what kind of position the user has removed
  switch ($(this).parent().attr('position')) {
    case "goalkeeper":
      GoalKeeperQuantity--;
      alert(GoalKeeperQuantity);
      break;
    case "defender":
      DefenderQuantity--;
      alert(DefenderQuantity);
      break;
    case "midfielder":
      MidfielderQuantity--;
      alert(MidfielderQuantity);
      break;
    case "forward":
      ForwardQuantity--;
      alert(ForwardQuantity);
      break;
  }
});

HTML Here i've got a simple table on the right side and in the middle a football field (where i can add and remove a football player)




  
  
    

         
          
            
          
     
     
  

  
  
    
      
            Playername
        Club
        Pos.
        Points
        Costs (in Mio.)
      
      
        
            +Manuel Neuer
        
        FCB
        GK
        43
        12.2
      
      
        
            +Jerome Boateng
        
        FCB
        DF
        39
        11.1
      
      
        
            +Holger Badstuber
        
        FCB
        DF
        31
        9.8
      
      
        
            +Mats Hummels
        
        FCB
        DF
        33
        10.2
      
      
        
            +Semih Kedhira
        
        FCB
        DF
        31
        8.9
      
      
        
            +Thomas Müller
        
        FCB
        DF
        31
        6.3

CSS (i know its a long version, but many things are important)

/* Content
--------------------------------------------- */

#content {
  float: left;
  margin: 1% 1%;
  width: 40%;
}


/* field
--------------------------------------------- */

#field {
  background-image: url(https://picload.org/image/rdllrgdp/field2.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 0%;
  min-width: 250px;
  min-height: 1000px;
  max-width: 800px;
  position: relative;
}


/* Sidebar
--------------------------------------------- */

#sidebar {
  float: left;
  padding: 0% 1% 1%;
  margin: 1% 0% 0% 0%;
  width: 15%;
  color: white;
  background-color: black;
}

.goalkeeper,
.defender,
.forward,
.midfielder {
  float: left;
  padding: 0% 1% 0%;
  margin-top: 1%;
  margin-right: 0%;
  width: 39%;
  color: white;
  background-color: black;
}

.drop {
  border: 1px;
  height: 5vw;
  width: 5vw;
  color: white;
  font-size: 13px;
  text-align: center;
  border-radius: 17%;
  border-style: dashed;
}

.ui-droppable-active {
  color: #cfcfcf;
  border: 2px dotted #ccc;
  background-color: #272727;
}

.ui-droppable-hover {
  border: 2px dotted #fefe88;
}

.rear {
  position: absolute;
  top: 10px;
}

.firstColumn {
  position: absolute;
  left: 98px;
}

.secondColumn {
  position: absolute;
  left: 176px;
}

.def {
  position: absolute;
  top: 90px;
}

.mid {
  position: absolute;
  top: 183px;
}

.for {
  position: absolute;
  top: 277px;
}

.thirdColumn {
  left: 251px;
}

.fourthColumn {
  left: 327px;
}

.fifthColumn {
  left: 403px;
}

.bottom {
  position: absolute;
  top: 300px;
}

#field span.remove:hover {
  background-color: #000;
  border-radius: 8px;
}

.btnAddPlayer {
  visibility: hidden;
  background: #4ad934;
  background-image: -webkit-linear-gradient(top, #4ad934, #37ab26);
  background-image: -moz-linear-gradient(top, #4ad934, #37ab26);
  background-image: -ms-linear-gradient(top, #4ad934, #37ab26);
  background-image: -o-linear-gradient(top, #4ad934, #37ab26);
  background-image: linear-gradient(to bottom, #4ad934, #37ab26);
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 0px 5px 0px 5px;
  text-decoration: none;
}

.btnAddPlayer:hover {
  background: #26ff00;
  background-image: -webkit-linear-gradient(top, #26ff00, #1ee000);
  background-image: -moz-linear-gradient(top, #26ff00, #1ee000);
  background-image: -ms-linear-gradient(top, #26ff00, #1ee000);
  background-image: -o-linear-gradient(top, #26ff00, #1ee000);
  background-image: linear-gradient(to bottom, #26ff00, #1ee000);
  text-decoration: none;
}

.forwardRowGrey:hover span.btnAddPlayer,
.midfielderRowGrey:hover span.btnAddPlayer,
.defenderRowGrey:hover span.btnAddPlayer,
.goalKepperRowGrey:hover span.btnAddPlayer,
.forwardRow:hover span.btnAddPlayer,
.midfielderRow:hover span.btnAddPlayer,
.defenderRow:hover span.btnAddPlayer,
.goalKepperRow:hover span.btnAddPlayer,
.defender:hover span.btnAddPlayer,
.goalkeeper:hover span.btnAddPlayer {
  visibility: visible;
}

.goalKepperRow, .defenderRow, .midfielderRow, .forwardRow {
  background-color: white;
  color: #000;
  font-family: arial;
  font-size: 14px;
  cursor: pointer;  
}

.greyRow{
  background-color: #999999;
  color: #000;
  font-family: arial;
  font-size: 14px;
  cursor: pointer;   
}

.goalKepperRowGrey, .defenderRowGrey, .midfielderRowGrey, .forwardRowGrey{
  background-color: #F6F6F6;
  color: #000;
  font-family: arial;
  font-size: 14px;
  cursor: pointer;  
}

.goalKepperRow:hover, .defenderRow:hover, .midfielderRow:hover, .forwardRow:hover, .goalKepperRowGrey:hover, .defenderRowGrey:hover, .midfielderRowGrey:hover, .forwardRowGrey:hover
{
  background-color: #D9D9D9;
  color:black;
}

JohnH · Accepted Answer

Your Fiddle example has a span with id of "goalkeeperLine" containing a div with an id of "goalie".

You can use these jQuery functions to hide and show the "goalie" div.

$("#goalie).hide;
$("#goalie").show;

Howerver, you may need to move the "goalkeeperLine" span tag inside the the "goalie" div so as to make that element be hidden when the div is hidden.

Jquery - how to remove content dynamically

Answers (1)

Related Questions