jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<button>Perform Search</button>



<p>
Expected Outcome
</p>
<div>
 <table>
      <thead>
        <tr>
        <th>Name</th>
        <th>Country</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>USA</td>
        </tr>
       
        
      </tbody>
    </table>
</div>

<br>
<br>
<p>
Actual Outcome
</p>
<div id="response"></div>

JavaScript

function processResponse(html){
var $html = $(html);
	//perform filtering here
  //I only elements from USA
  $html.filter(function(index, element){
  	return true;
  });
	$("#response").html($html);
	
}

//cannot channge this format
var simulatedResponse = 
`html=
  <div>
    <table>
      <thead>
        <tr>
        <th>Name</th>
        <th>Country</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>USA</td>
        </tr>
        <tr>
          <td>James Doe</td>
          <td>Canada</td>
        </tr>
         <tr>
          <td>Jonas Doe</td>
          <td>UK</td>
        </tr>
      </tbody>
    </table>
  </div>

`

// handle click and add class
var button = $("button");
button.on("click", () => {
$("#response").html("");
  //$("#response").html(response);
  $.ajax({
      method: "post",
      url: "/echo/html/",
      data: simulatedResponse
    })
    .done(processResponse);
})