javascript - 如何使用jquery删除php while循环中的每一行？

Question

我有以下 php 代码:

<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>       

显示如下图片:

现在，当我单击(+)符号时，每行都会显示(X)符号，如下图所示:

现在我想通过单击 (X) 符号来删除/隐藏每一行。所以我使用以下 jquery 代码:

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

但它没有删除，如何通过单击 (X) 符号删除每一行？

Answer 1

$() 函数中的第二个参数用于上下文(作用域)。 http://api.jquery.com/jquery/

在您的事件处理程序中，$(this) 指的是单击的 X，它不包含类为“.delete_ex_ph_label_data”的元素。相反，修改您的事件处理程序以将祖先链向上移动到第一个“.delete_ex_ph_label_data”并将其删除。

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

Fiddle here