Remove a single row in table created using div's

Question

I'v table which I create using PHP and I used divs to create the table, below is the table code.

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

I've select button for each data row. I want to hide or remove each row after data get successfully submitted to table. I use jquery to send the data and to disable the button.

My Jquery code,

$(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();
                }
            }
        });
    });
});

I tried to remove a single line using many other methods mentioned in SO but none of them worked. Current code just removed the entire table I'm just stuck not knowing how to remove a single line.

Answer 1

That is because you find the parent div of any .row in your document, which is the entire table. Try to find the closest div.row from the button clicked and remove that one:

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

Answer 2

Use the HTML DOM elements to remove the row:

This is how you use the function where (0) is the index of the table row.

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