Jquery bascule entre append et retirer ne fonctionne pas comme je m'y attendais

Question

La bascule suivante entre append et supprimer ne fonctionne pas:

$('.t').click(function() { 
      var className = $(this).data('class'); 
      $(this).toggleClass(className).toggleClass(className+'1'); 

      var newTable='<table style="font-size: 14;float:left;padding-left: 13px;" cellpadding="5"><tr><td style="color: #B2B2B9;">T1</td></tr><tr><td id="cap">20</td></tr><tr><td id="minseat">8</td></tr></table>'; 
      $("#newDiv").append(newTable).remove(newTable); 
     }); 

HTML

<div class="t a" data-class="a"> 8cghfghfghfghfg</div> 
<div class="t b" data-class="b">20cghfghfghfghfg</div> 
<div class="t c" data-class="c"> 4cghfghfghfghfg</div> 

<div id="newDiv"></div> 

Working Demo Here..

Ici, ce Je veux faire est .. si je clique sur div.t, je veux supprimer la classe particulière (Ex:. A) et ajouter la classe respective (Ex. A1), celui-ci j'ai fini.

Mais je veux ajouter une table tout en cliquant sur la première fois, je veux supprimer cette table ajoutée tout en cliquant une seconde fois.

comment puis-je parvenir, s'il vous plaît quelqu'un peut-il aider à me mettre ...

Merci

Answer 1

Pour basculer ajouter et supprimer, vous pouvez utiliser la propriété data de l'élément sur lequel vous avez cliqué. Son approche propre:

$('.t').click(function() { 
     //general stuff must happen everytime class is clicked 
     //get the className from data- attr 
     var className = $(this).data('class'); 
     //toggling to change color 
     $(this).toggleClass(className).toggleClass(className + '1'); 

     //check if its clicked already using data- attribute 
     if ($(this).data("clicked")) { 
      //remove it if yes 
      $("#newDiv").find("#tablefor-" + className).remove(); 
     } else { 
      //new table - note that I've added an id to it indicate where it came from 
      var newTable = '<table id="tablefor-' + className + '" style="font-size: 14;float:left;padding-left: 13px;" cellpadding="5"><tr><td style="color: #B2B2B9;">T1' + className + '</td></tr><tr><td id="cap">20</td></tr><tr><td id="minseat">8</td></tr></table>'; 

      //append table     
      $("#newDiv").append(newTable); 
     } 
     //reverse the data of clicked 
     $(this).data("clicked", !$(this).data("clicked")); 
    }); 

Démo: http://jsfiddle.net/hungerpain/m9ak9/11/

Answer 2

il suffit d'utiliser un commutateur if pour déterminer wether la table est déjà présent ou non. J'ai modifié votre violon à démontrer: http://jsfiddle.net/m9ak9/6/

J'ai ajouté une id à la table pour le rendre easiert pour identifier, mais vous pouvez aussi chercher quelque chose comme ceci:

var findTableInDiv = $('#newDiv').find('table');