How to Remove Rows in a Table Matching 2 data- values using jquery

Question

Im trying to remove rows from a table that match 2 values ie using and AND operator to match where user = username and phrase = searchedphrase

So for example:

<table>
    <tr class="user1">
    <td class="user">user1</td>
    <td class="phrase">phrase1</td>
    <td class="filename">filename1</td>
    <td><button class="blacklist" data-value="user1" data-phrase="phrase1">Blacklist</button></td></tr>

    <tr class="user1">
    <td class="user">user1</td>
    <td class="phrase">phrase2</td>
    <td class="filename">filename2</td>
    <td><button class="blacklist" data-value="user1" data-phrase="phrase2">Blacklist</button></td></tr>

    <tr class="user1">
    <td class="user">user1</td>
    <td class="phrase">phrase1</td>
    <td class="filename">filename3</td>
    <td><button class="blacklist" data-value="user1" data-phrase="phrase1">Blacklist</button></td></tr>

I've used data- in the button elements to pass values to an ajax script that executes some php, i suspect this may not be an optimal way of doing things im very new to jquery.

I can identify multiple rows and manipulate them using

$('.'+user).css("background-color","red");

I guess i need a function to pull out the rows matching both values and iterate them over .remove?

This is how the script is triggered, any pointers on the best way to do this would be greatly appreciated!

<script type="text/javascript">
$('.blacklist').click(function() 
        {
        var user = $(this).data('value');
        var phrase = $(this).data('phrase');
        if(user != '')
                {
                $.ajax({
                        url: 'test.php',
                        method: 'POST',
                        dataType:'json',
                        data: {'user' : user}, //then getting $_POST['user']
                        success: function(data) 
                                {

                            }

Answer 1

You can use filter() to create element collections that aren't easily accomplished using selectors.

Assume you want to run some conditional checks on the text in your td.user and td.phrase classes you can do something like.

var userMatch= /* some value */
var phraseMatch = /* some other value */

$('tr.user').filter(function(){
    var user= $(this).find('.user').text(), phrase=$(this).find('.phrase').text();
    /* return boolean based on conditions desired*/
    return user === userMatch &&  phrase === phraseMatch; 
 /* remove the new collection returned by "filter" */ 
}).remove();

filter() API Docs

Answer 2

If you wanted to do this all within your jquery function, it'd look something like:

$('.blacklist').click(function() 
 {

  var user = $(this).data('value');
  var phrase = $(this).data('phrase');

  if (user != '')
  {

    //loop through each row of the table
    $('table tr').each(function() 
    {
      //check if criteria matches
      if ($(this).find('.user').html() == user && $(this).find('.phrase').html() == phrase)
      {
        //remove the row
        $(this).remove();

        //if you needed to use ajax to perform some kind of DB operation
        //you could perform this here as well
        /*
        $.ajax({
          url: 'test.php',
          method: 'POST',
          dataType:'json',
          data: {'user' : user}, //then getting $_POST['user']
          success: function(data) 
          {
          }
        });
        */
      }
    });

  }
});

Answer 3

I've just thought of a way to do this with php - I can create an md5 hash of the user and phrase then assign it to a data-hash value. This would enable me to use something like

var hash = $(this).data('hash');
$('.'+hash).remove();