单击删除时需要删除整行

时间:2011-05-19 15:35:02

标签: javascript jquery html

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

4 个答案:

答案 0 :(得分:3)

假设您要删除的行的<td>内有按钮,链接或其他内容,您可以执行以下代码之类的操作。

  • 神奇的是:$(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();
});

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

答案 1 :(得分:1)

我在该代码中看到的唯一立即错误是:

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

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

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

它位于第一个两个<a>元素上。

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

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

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