このHTMLのJqueryで要素を取る必要があります

Question

これは私のプログラムにあるすべてのHTMLコードのHTMLです。

<li component="category/topic" class="row clearfix pinned" data-tid="1" data-index="2" data-cid="2" itemprop="itemListElement"> 
    <meta itemprop="name" content="Welcome to your NodeBB!"> 

    <div class="col-md-7 col-sm-9 col-xs-10 content"> 
     <div class="avatar pull-left" data-original-title="" title=""> 
          <div class="select" component="topic/select"> 
            <div class="user-icon" style="background-color: #673ab7;" title="" data-original-title="admin">A</div> 
       <i class="fa fa-check"></i> 
      </div> 
     </div> 

     <h2 component="topic/header" class="title"> 
      (I NEED TO REMOVE THIS LINE) <i component="topic/pinned" class="fa fa-thumb-tack "></i> 
      <i component="topic/locked" class="fa fa-lock hide"></i> 
          <a href="/topic/1/welcome-to-your-nodebb" itemprop="url">Welcome to your NodeBB!</a><br> 



      <span class="tag-list hidden-xs"> 


      </span> 

      <small class="hidden-xs"><span class="timeago" title="Fri Aug 05 2016 11:44:46 GMT+0200 (CEST)">25 days ago</span></small> 
      <small class="visible-xs-inline"> 
            <span class="timeago" title="Mon Aug 29 2016 16:39:05 GMT+0200 (CEST)">about 19 hours ago</span> 
      </small> 
     </h2> 
    </div> 

    <div class="mobile-stat col-xs-2 visible-xs text-right"> 
     <span class="human-readable-number">2</span> <a href="/topic/1/welcome-to-your-nodebb/2"><i class="fa fa-arrow-circle-right"></i></a> 
    </div> 

    <div class="col-md-1 hidden-sm hidden-xs stats"> 
     <span class="human-readable-number" title="2">2</span><br> 
     <small>Posts</small> 
    </div> 

    <div class="col-md-1 hidden-sm hidden-xs stats"> 
     <span class="human-readable-number" title="6">6</span><br> 
     <small>Views</small> 
    </div> 

    <div class="col-md-3 col-sm-3 teaser hidden-xs"> 
     <div class="card" style="border-color: #59b3d0"> 
              <p> 
       <a href="/user/admin"> 
              <span title="" class="user-icon user-img" style="background-color: #673ab7;" data-original-title="admin">A</span> 
       </a> 
       <a class="permalink" href="/topic/1/welcome-to-your-nodebb/2"> 
        <span class="timeago" title="Mon Aug 29 2016 16:39:05 GMT+0200 (CEST)">about 19 hours ago</span> 
       </a> 
      </p> 
      <div class="post-content"> 
       <p>adsasdasd</p> 

      </div> 
     </div> 
    </div> 
</li> 

私はこのHTMLを持っていると私は、この行を削除する必要があります。

<i component="topic/pinned" class="fa fa-thumb-tack "></i> 

は、他の<li component>があると仮定します。だから私はこのようにJQueryを使用する

var params.tid=1; 

$('li[component="category/topic"][data-tid="'+params.tid+'"]').children('i[component="topic/pinned"]').remove(); 

しかし、それは動作しません！誰も私がこれらの行を削除するのを助けることができますか？

EDIT

スクリプトは次のとおりです。

$(window).on('action:ajaxify.end', function(event, data) { 
     $(document).ready(function() { 
      socket.on('connectinseriscidatafissadiscussione', function(params) { 
       if (new RegExp(/^category\/[0-9]+/).test(data.url)) { 
        console.log("DENTRO IL SOCKET " + params.tid); 

        //$('li[component="category/topic"]').remove(); 
        $('li[component="category/topic"][data-tid="'+params.tid+'"]').children('i[component="topic/pinned"]').remove(); 
        console.log("PARAMS " + JSON.stringify(params)); 


       } 

      }); 
     }); 


    }); 

Answer 1

はjsfiddleを更新しました。

私はこのためにjsfiddleを作成しました。このコードをテストするためにのみ静的なparams変数を使用しています。私の変更を今すぐチェックし、ソケットで試してみてください。私のjsfiddleでは正しく動作し、削除する要素を削除します。

$(document).ready(function() { 
    var params = 1;     
    $('li[component="category/topic"][data-tid="'+params+'"] div h2.title').find('i[component="topic/pinned"]').remove(); 
});