title: How to clear content of div container using JS/Jquery?
body: <p>I have been developing some page and I need to clear a content of some div:</p>
  
  <pre><code>                &lt;table&gt;
                      &lt;tbody&gt;
                      &lt;div class="records_content"&gt;
                          &lt;?php
                              $i=0;
                              foreach ($records as $record) {
                                  echo "&lt;tr class = 'output' style='border-bottom: 1px dotted silver;'&gt;";
                                  echo "&lt;td width='400'&gt;" . strip_tags($record['language_value']) . "&lt;/td&gt;";
                                  if ($record['approved_translation'])
                                  {
                                      echo "&lt;td width='200' height='30'&gt;&lt;div class='field' id='".$record['label_value']."/".$record['language_id']."'&gt;".
                                          strip_tags($record['approved_translation']['language_value'])."&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;button class='btn btn-info' id='{$record['label_value']}/{$record['language_id']}' href='#'&gt;More...&lt;/button&gt;"."&lt;/td&gt;";
                                  }
                                  else
                                  {
                                      echo "&lt;td  width='200'&gt;"."&lt;div id='".$record['label_value']."/".$record['language_id']."'&gt;&lt;span class='no_translate'&gt;Not translated&lt;/span&gt;&lt;/div&gt;" . "&lt;/td&gt;";   
                                  }                   
                                  echo '&lt;/tr&gt;';
                                  $i++;
                              }
                          ?&gt;
                      &lt;/div&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt; 
  </code></pre>
  
  <p>Piece of JS code:</p>
  
  <pre><code>           $(".page_button").click(function () {
                  $.post("http://"+document.location.host+"/index.php/welcome/update_records_set/"+this.id,
                      function(data)
                      {
                          alert('123');
                          $(".records_content").empty();
                      });
              });
  </code></pre>
  
  <p>This script works, because I see '123' notification, but div container with '.records_content' class isn't clear. Please, tell me, how can I fix it? Thank you. </p>
  
  <p><strong>UPDATE:</strong>
  Now it works. But I have a new problem with pagination:</p>
  
  <pre><code>                &lt;br&gt;&lt;b&gt;Page:&lt;/b&gt;&lt;br/&gt;
                  &lt;?php
                      for($i=0; $i&lt;$count; $i++)
                      {
                          if ($i==0)
                          {
                              echo "&lt;div class='selected_page_button'&gt;".($i+1)." "."&lt;/div&gt;";
                          }
                          else
                          {
                              echo "&lt;div class='page_button'&gt;".($i+1)." "."&lt;/div&gt;";
                          }
                      }
                  ?&gt;
  </code></pre>
  
  <p>And code for changing class of button:</p>
  
  <pre><code>                $(".page_button").click(function () {
  
                      $(".selected_page_button").attr("class", "page_button");
                      $(this).attr("class", "selected_page_button");
                  });
  </code></pre>
  
  <p>It works correctly for all buttons without first. When my page is created the first page is selected. When I click by "2", then "1" is simple and "2" is selected. The same thing is with all buttons without "1": if I click by "2" (or other one) then I can't click by first! "1" changes it's view but doesn't change behavior, because simple button is clickable and selected button is not clickable! </p>