How to delete each row in php while loop using jquery?

Question

I have following php code :

<tr class="delete_ex_ph_label_data">              
    <td align="left">
        <select name="phone_label_ex[]" class="select2 work_phone_class">
            <option value="">--Select--</option>
            <?php
            $get_orderby =  mysqli_query($link, "SELECT order_type FROM contact_label_type");
            $get_orderby_re =  mysqli_fetch_array($get_orderby);
            $ph_orderby = $get_orderby_re['order_type'];
            $get_label_type =  mysqli_query($link, "SELECT * FROM contact_label_type WHERE clid = '1' ORDER BY order_type $ph_orderby"); 

            while($get_label_type_re =  mysqli_fetch_array($get_label_type)){
            $label_type_id = (int) $get_label_type_re['ctid'];
            $label_type = inputvalid($get_label_type_re['contact_label_type']);

            if($ctid_d_cl == $label_type_id){
            $sel = 'selected="selected"';
            }else{
            $sel = '';
            } 

            echo "<option value=' $label_type_id' $sel> $label_type</option>";  
            }
            ?>
        </select>
    </td>
    <td align="right">                
        <input type="text" name="phone_label_value_ex[]" class="small3 work_phone_class" id="work_phone" placeholder="phone"value="<?php echo $data_cl; ?>" />
        <input type="hidden" name="ctid" value="<?php echo $ctid_d_cl; ?>">
        <input type="hidden" name="label_id" value="1">
        <input type="hidden" name="phone_label_cdid_ex[]" value="<?php echo $cdid_d_cl; ?>">
        <input type="hidden" name="phone_mid[]" value="<?php echo $id_d_cl; ?>">
        <spam class="delete_ex_ph_label"><a href='#'>&nbsp;X</a></spam>
    </td>              
</tr>

Which showing bellow image :

Now when I click (+) sign it showing (X) sign to each row, Like bellow image :

Now I want to remove/hide each row by clicking on (X) sign. So that I am using following jquery code :

$(".delete_ex_ph_label", $(this)).on('click', function() {         
   $(".delete_ex_ph_label_data", $(this)).remove();
});

But it's not removing, How can I remove each row by clicking on (X) sign ?

Slippery Pete · Accepted Answer · 2016-06-23 17:22:15Z

1

The second parameter in the $() function is for context (scoping). http://api.jquery.com/jquery/

In your event handler, $(this) refers to the clicked X, which does not contain the element with the class '.delete_ex_ph_label_data'. Instead, modify your event handler to go up the ancestor chain to the first '.delete_ex_ph_label_data' and delete that.

$(".delete_ex_ph_label").on('click', function() {         
   $(this).parents('.delete_ex_ph_label_data').remove();
});

Fiddle here

answered Jun 23, 2016 at 17:22

Slippery Pete

3,1101 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to delete each row in php while loop using jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related