单击删除时需要删除整行

Question

   <tr>
        <td>Year</td>
        <td>Make</td>
        <td>Model</td>
        <td>Doors</td>
        <td>4 Wheel Drive</td>
    </tr>
    <tr>
        <td><input type="text" class="small_input_text required only_number" name="auto_year_'+no_fields+'" id="auto_year_'+no_fields+'" /></td>
        <td><input type="text" class="small_input_text required" name="auto_make_'+no_fields+'" id="auto_make_'+no_fields+'" /></td>
        <td><input type="text" class="small_input_text required" name="auto_model_'+no_fields+'" id="auto_model_'+no_fields+'" /></td>
        <td>
            <select name="auto_doors_'+no_fields+'" id="auto_doors_'+no_fields+'">
                <option value="2 door">2 door</option>
                <option value="4 door">4 door</option>
             </select>
        </td>
        <td>
            <select name="auto_liability_'+no_fields+'" id="auto_liability_'+no_fields+'">
                <option value="No">No</option>
                <option value="Yes">Yes</option>
            </select>
        </td>
        <td>
        <a class="remove_new" onclick="$(this).parent().parent().remove();");">x</a>
        </td>
    </tr>
    <tr>
        <td colspan="7">
        <ul class="regular_form">
            <li>
            <label class="large_label">Current Liability Limit:</label>
            <input type="text" class="medium_input_text" name="l_exp_date_'+no_fields+'" id="l_exp_date_'+no_fields+'"/>
            </li>
            <li>
            <label class="large_label">Bodily Inj. Liab.:</label>
            <select name="a_body_'+no_fields+'" id="a_body_'+no_fields+'">
                <option value="50/100">50k / 100k</option>
                <option value="100/300">100k / 300k</option>
                <option value="250/500">250k / 500k</option>
            </select>
            </li>
            <li>
            <label class="large_label">Property Damage:</label>
            <select name="a_property">
                <option value="10">10,000</option>
                <option value="25">25,000</option>
                <option value="50">50,000</option>
                <option value="100">100,000</option>
                <option value="100">250,000</option>
            </select>
            </li>
            <li>
                <label class="large_label">
                    Uninsured Motorist:</label><select name="a_unins_'+no_fields+'" id="a_unins_'+no_fields+'"><option
                        value="25/50/25">25/50/25</option>
                        <option value="50/100/50">50/100/50</option>
                        <option value="100/300/100">100/300/100</option>
                    </select></li><li>
                        <label class="large_label">
                            Collision:</label><select name="a_col_'+no_fields+'" id="a_col_'+no_fields+'"><option
                                value="250">250 Deductible</option>
                                <option value="500">500 Deductible</option>
                                <option value="1000">1,000 Deductible</option>
                            </select></li><li>
                                <label class="large_label">
                                    Comprehensize:</label><select name="a_comp_'+no_fields+'" id="a_comp_'+no_fields+'"><option
                                        value="0">0 Deductible</option>
                                        <option value="100">100 Deductible</option>
                                        <option value="250">250 Deductible</option>
                                        <option value="500">500 Deductible</option>
                                        <option value="1000">1000 Deductible</option>
                                    </select></li><li>
                                        <label class="large_label">
                                            Rental Car:</label><select name="a_rent_'+no_fields+'" id="a_rent_'+no_fields+'"><option
                                                value="$20/day">$20/day</option>
                                                <option value="$30/day">$30/day</option>
                                            </select></li><li>
                                                <label class="large_label">
                                                    Towing:</label><select name="a_towing"><option value="$100">$50</option>
                                                        <option value="$100">$100</option>
                                                    </select></li></ul>
            <a class="remove_new" onclick="$(this).parent().parent().remove();">x</a>
        </td>
    </tr>

Answer 1

假设您在要删除的行的 内有一个按钮、链接或其他内容，您可以执行类似以下代码的操作。

• 神奇之处在于：$(this).closest('tr').remove()——最接近的将在 DOM 中向上查找 tr 元素。如果您想快速修复代码，请尝试 onclick="$(this).closest('tr').remove();"

HTML

<table>
  <tbody>
   <tr>
     <td>Row 1</td>
     <td><input type="button" class="remove_row" value="Remove Row"/></td>
   </tr>
   <tr>
     <td>Row 2</td>
     <td><input type="button" class="remove_row" value="Remove Row"/></td>
   </tr>
  </tbody>
</table>

jQuery

$('.remove_row').live('click', function() {
    $(this).closest('tr').remove();
});

Fiddle 示例： http://jsfiddle.net/garreh/ernnP/
使用 .live 假设您将来希望具有添加行的功能。

Answer 2

我在该代码中看到的唯一直接错误是：

onclick="$(this).parent().parent().remove();");"

...最后有一个额外的 );"。它应该是：

onclick="$(this).parent().parent().remove();"

它位于第一个两个 元素。

Answer 3

您的代码中有一些语法错误，让我们只看一下删除链接

<a class="remove_new" onclick="$(this).parent().parent().remove();");">x</a>

这可能应该是

<a class="remove_new" onclick="$(this).parent().parent().remove();">x</a>

最好按照这样的方式做一些事情

<a class="remove_new" onclick="$(this).closest('tr').remove();">x</a>

这样您就不必依赖 DOM 的稳定性并且它应该可以工作，我尝试在 JsFiddle 中测试它，但代码中的某些内容与 JsFiddle 混淆，并且它无法正确导入 jQuery。

将来，如果您很好地格式化代码并且可以提供简化的案例，您可能会更快地得到答案。

Answer 4

http://jsfiddle.net/orolo/bnZwg/

$('.remove_new').click(function() {
    $(this).parent().parent().remove();
});