如何正确使用.append和.remove

Question

我想知道为什么我的代码无法正常工作。

这里是我的代码

oTable.$('tr').click(function() { 

    $(this).toggleClass('selected'); 

    var sData = oTable.fnGetData(this); 
    //alert(sData[6]); 

    if ($(this).hasClass("selected")) { 
     $(this).toggleClass(''); 

     $('#try').append("<p class='" + sData[6] + "'>" + sData[6] + "</p>"); 
     $('#price').append("<p class='" + sData[5] + " total'>" + sData[5] + "</p>"); 
     $('#item').append("<p class='" + sData[4] + "'>" + sData[4] + "</p>"); 
     $('#model').append("<p class='" + sData[3] + "'>" + sData[3] + "</p>"); 
     $('#brand').append("<p class='" + sData[2] + "'>" + sData[2] + "</p>"); 
     $('#pid').append("<p class='" + sData[1] + "'>" + sData[1] + "</p>"); 
    } else { 
     $("p", "#try").remove("." + sData[6]); 
     $("p", "#price").remove("." + sData[5]); 
     $("p", "#item").remove("." + sData[4]); 
     $("p", "#model").remove("." + sData[3]); 
     $("p", "#brand").remove("." + sData[2]); 
     $("p", "#pid").remove("." + sData[1]); 
     // alert ("sad"); 
    } 

仍然没有删除的品牌和pid。需要你的帮助的人。

这里是我的jquery所在的html代码。这些是在点击tr时会获得价值的div。在数据表

<div id="try" class="try"></div> 
          <div id="price" class="price"></div> 
          <div id="item" class="item"></div> 
          <div id="model" class="model"></div> 
          <div id="brand" class="brand"></div> 
          <div id="pid" class="pid"></div> 





          <table id="example" cellspacing="0" width="100%" class="display"> 
           <thead> 
            <tr> 
            <th></th> 
            <th>Category</th> 
            <th>Brand</th> 
            <th>Model</th> 
            <th>Item Name</th> 
            <th>Price</th> 
            <th>id</th> 
            </tr> 
           </thead> 

           <tbody> 
           <?php do { ?> 
            <tr> 
            <td><?php echo ++$i;?></td> 
            <td><?php echo $row_products['pid']; ?></td> 
            <td><?php echo $row_products['brand']; ?></td> 
            <td><?php echo $row_products['model']; ?></td> 
            <td><?php echo $row_products['item_name_']; ?></td> 
            <td><?php echo $row_products['price'];?></td> 
            <td><?php echo $row_products['id']; ?></td> 
            </tr> 
            <?php } while ($row_products = mysql_fetch_assoc($products)); ?> 
           </tbody> 
          </table> 

Answer 1

HTML：

<div class="container"> 
<div id="try"></div> 
          <div id="price"></div> 
          <div id="item"></div> 
          <div id="model"></div> 
          <div id="brand"></div> 
          <div id="pid"></div> 


</div> 

         <table id="example" cellspacing="0" width="100%" class="display"> 
          <thead> 
           <tr> 
           <th></th> 
           <th>Category</th> 
           <th>Brand</th> 
           <th>Model</th> 
           <th>Item Name</th> 
           <th>Price</th> 
           <th>id</th> 
           </tr> 
          </thead> 

          <tbody> 
          <?php do { ?> 
           <tr> 
           <td class="try"><?php echo ++$i;?></td> 
           <td class="pid"><?php echo $row_products['pid']; ?></td> 
           <td class="brand"><?php echo $row_products['brand']; ?></td> 
           <td class="model"><?php echo $row_products['model']; ?></td> 
           <td class="item"><?php echo $row_products['item_name_']; ?></td> 
           <td class="price"><?php echo $row_products['price'];?></td> 
           <td><?php echo $row_products['id']; ?></td> 
           </tr> 
           <?php } while ($row_products = mysql_fetch_assoc($products)); ?> 
          </tbody> 
         </table> 

JS：

$('tbody tr').on('click', function() { 



    if (!$(this).hasClass("selected")) { 
      $(this).addClass('selected'); 
     $('#try').append("<p class='try_" + $(this).find('.try').text()+"'>" + $(this).find('.try').text() + "</p>"); 
     $('#price').append("<p class='try_" + $(this).find('.try').text() + " total'>" + $(this).find('.price').text() + "</p>"); 
     $('#item').append("<p class='try_" + $(this).find('.try').text() + "'>" + $(this).find('.item').text() + "</p>"); 
     $('#model').append("<p class='try_" + $(this).find('.try').text() + "'>" + $(this).find('.model').text() + "</p>"); 
     $('#brand').append("<p class='try_" + $(this).find('.try').text() + "'>" + $(this).find('.brand').text() + "</p>"); 
     $('#pid').append("<p class='try_" + $(this).find('.try').text() + "'>" + $(this).find('.pid').text() + "</p>"); 
    } else { 
     $(this).removeClass('selected'); 
     $(".container").find('p').remove(".try_" + $(this).find('.try').text()); 
    } 


}); 

的jsfiddle：https://jsfiddle.net/rbrx0obz/