刪除使用div創建的表中的一行

Question

我是用PHP創建的表，並使用div來創建表，下面是表代碼。

<div class="limiter">
    <div class="container-table100">
        <div class="wrap-table100">
            <div class="table">

                <div class="row header">
                    <div class="cell topLeft">
                        Customer Name
                    </div>
                    <div class="cell">
                        Target
                    </div>
                    <div class="cell">
                        File Type
                    </div>
                    <div class="cell">
                        Job Comment
                    </div>
                    <div class="cell">
                        Cust. ID
                    </div>
                    <div class="cell topRight">
                        Select Job
                    </div>
                </div>

                <?php while ($getJobsRow = $getJobs -> fetch(PDO::FETCH_ASSOC)){ ?>
                    <?php $loopCount++; //Count the loop run through time ?>
                <div class="row">
                    <div class="cell left <?php if ($numOfRows == $loopCount){ ?>bottomLeft<?php } //Set the CSS class if the loop is at the last row ?> " data-title="Full Name">
                        <?php echo $getJobsRow['customer_name']; ?>
                    </div>
                    <div class="cell" data-title="Age">
                        <?php echo $getJobsRow['Mal_Name']; ?>
                    </div>
                    <div class="cell" data-title="Job Title">
                        <?php echo $getJobsRow['FileExt']; ?>
                    </div>
                    <div class="cell" data-title="Location">
                        <?php echo $getJobsRow['Job_Comment']; ?>
                    </div>
                    <div class="cell" data-title="Location">
                        <?php echo $getJobsRow['customer_id']; ?>
                    </div>
                    <div class="cell right <?php if ($numOfRows == $loopCount){ ?>bottomRight<?php } ?> " data-title="Location">
                        <button class="selJobBtn w3-btn w3-blue-dark w3-round-medium w3-ripple" data-jid="<?php echo $getJobsRow['jId']; ?>">Select</button>
                    </div>
                </div>
                <?php } ?>

            </div>
        </div>
    </div>
</div>

我為每個數據行選擇了按鈕。 我想在數據成功提交到表后隱藏或刪除每一行。 我使用jquery發送數據並禁用按鈕。

我的Jquery代碼，

$(document).ready(function () {
    $('.selJobBtn').on('click', function () {
        var selBtn = this;
        $.ajax({
            url: '../Functions/OpenjobLister_Function.php',
            type: 'get',
            data: {
                'jid':$(this).data('jid'),
                'uid':$('#uId').val()
            },
            dataType:'text',
            complete:function(data){
                if(data.responseText !== "1"){
                    alert("Data not added");
                }else{
                    $(selBtn).prop('disabled', true);
                    $('.row').parent('div').first().remove();
                }
            }
        });
    });
});

我嘗試使用SO中提到的許多其他方法刪除一行，但沒有一個起作用。 當前代碼只是刪除了整個表，我只是不知道如何刪除一行而已。

Answer 1

這是因為您在文檔中找到了整個表的任何.row的父div。 嘗試從單擊的按鈕中找到最接近的div.row並將其刪除：

selBtn.closest('div.row').remove();

Answer 2

使用HTML DOM元素刪除該行：

這是您使用函數的方式，其中（0）是表行的索引。

document.getElementById("myTable").deleteRow(0);