Question

我创建了一个包含点击编辑的表格。我现在正在尝试从表中删除行。我的代码是从数据库中删除数据，但是没有删除html中的表行。我怎么能做到这一点？

感谢您的帮助！

    <table class="table">
    <thead>
    <th>Item</th><th>Amount</th><th>Category</th>
    </thead>
    <tbody>
        <tr class="edit_tr" id="3">
        <td class="edit_td">
                        <span class="text" id="item_3">Test</span>
                        <input type="text" value="Test" class="editbox" id="item_input_3"/>
    </td>        <td class="edit_td">
                        <span class="text" id="amount_3">-42.00</span>
                        <input type="text" value="-42.00" class="editbox" id="amount_input_3"/>
    </td>        <td class="edit_td">
                        <span class="text" id="category_3">5</span>
                        <input type="text" value="5" class="editbox" id="category_input_3"/>
    </td>        <td><button class="delete" id="3">Delete</button></td>
    </tr>

    </tbody>
</table>
<form method="POST" action="http://localhost/midas/lineitems" accept-charset="UTF-8"><input name="_token" type="hidden" value="dluuzIEE6ef1RgWhMBn2iBSooZdncUviCSpkbH7d"><div>
        <label for="item">Item:</label>     <input name="item" type="text" id="item">       
        <label for="amount">Amount:</label>     <input name="amount" type="text" id="amount">       
        <label for="category">Category:</label>     <input name="category" type="text" id="category">       
    <input type="submit" value="Submit"></div>
</form>
      <hr>

      <footer>
        <p>&copy; Midas Money Management 2013</p>
      </footer>
    </div> <!-- /container -->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>

        <script src="js/main.js"></script>

        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src='//www.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>

<script type="text/javascript">


    $(document).ready(function()
    {
        $("button.delete").click(function() {
            var ID=$(this).attr('id');
            var dataString='_method=DELETE';
            var location = "http://localhost/midas/lineitems/"+ID;
            $.ajax({
                type: "POST",
                url: location,
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $("#item_"+ID).html(item);
                    $("#amount_"+ID).html(amount);
                    $("#category_"+ID).html(description);
                }
            });
        });

        $(".edit_tr").click(function()
        {
            var ID=$(this).attr('id');
            $("#item_"+ID).hide();
            $("#amount_"+ID).hide();
            $("#category_"+ID).hide();
            $("#amount_input_"+ID).show();
            $("#item_input_"+ID).show();
            $("#category_input_"+ID).show();

        }).change(function()
        {
            var ID=$(this).attr('id');
            var item=$("#item_input_"+ID).val();
            var amount=$("#amount_input_"+ID).val();
            var category=$("#category_input_"+ID).val();
            var dataString = 'id='+ ID +'&item='+item+'&amount='+amount+'&category='+category+'&_method=PATCH';
            var location = "http://localhost/midas/lineitems/"+ID;



            if(item.length>0 && amount.length>0)
            {


                $.ajax({
                    type: "POST",
                    url: location,
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        $("#item_"+ID).html(item);
                        $("#amount_"+ID).html(amount);
                        $("#category_"+ID).html(description);
                    }
                });
            }
            else
            {
                alert('Enter something.');
            }

        });





// Edit input box click action
        $(".editbox").mouseup(function()
        {
            return false
        });

// Outside click action
        $(document).mouseup(function()
        {
            $(".editbox").hide();
            $(".text").show();
        });

    });




</script>

Answer 1

虽然您提供的代码很长且不清楚，但您可以使用remove这样的方法：

$('tr').remove();

Answer 2

删除处理程序中没有代码可以删除行

$("button.delete").click(function () {
    var ID = $(this).attr('id');
    var dataString = '_method=DELETE';
    var location = "http://localhost/midas/lineitems/" + ID;
    $.ajax({
        type: "POST",
        url: location,
        data: dataString,
        cache: false,
        //pass the button as the context for ajax callback methods
        context: this,
        success: function (html) {
            //find the tr in which the clicked button belongs to and delete it
            $(this).closest('tr').revmove()
        }
    });
});

见

Jquery - 按下按钮后删除元素

2 个答案: