Delete a table row on button click in Javascript

Question

I have a table with the following 3 columns where each row is dynamically appended.

Condition : Is a mere WHERE clause conditional statement string
Remove : A button that removes that row (Removes a condition)
Join with : A drop down combo

When the user clicks on the Remove button, that particular row needs to be removed.

I have written the code for this, but nothing happens and am not getting any errors on the console as well.

Code in Context

$("#whereConditionTable").append(
        "<tr>"+
            "<td>"+conditionString+"</td>"+
            "<td><button id='removeConditionBtn' name='removeConditionBtn' class='btn btn-default'><img src='resources/images/removeWhereCondition.png' width='25px' height='25px'></button>"+
            "<td>"+
                "<select id='where-Condition-Join-Combo' name='where-Condition-Join-Combo' class='form-control'>"+
                  "<option value='1'>Join using</option>"+
                  "<option value='2'>AND</option>"+
                  "<option value='3'>OR</option>"+
                "</select>"+
              "</td>"+
        "</tr>"
   );

    document.getElementById("removeConditionBtn").addEventListener("click", function() {
    removeWhereCondition();
}, false);

removeWhereCondition()

function removeWhereCondition()
{
    $(this).closest("tr").remove();
}

Any suggestions in this regard will be highly appreciated.

Kunvar Singh · Accepted Answer · 2017-09-20 14:41:45Z

3

function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
}

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable">

<tr>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>

answered Sep 20, 2017 at 14:41

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nano HE Over a year ago

It worked on my side ,thank you Sir.

Jon Uleis · Accepted Answer · 2017-09-20 14:35:45Z

Few things to fix:

You're combining jQuery and vanilla JavaScript (getElementById), so I've tidied some of that up and rewritten it as jQuery.
HTML documents can not have repeating IDs. If your append ran more than once, it would create additional #removeConditionBtn and #where-Condition-Join-Combo elements, and JS would cease to work. I've changed these to classes, which are reusable.
Your addEventListener to bind a click event was only going to bind to (one) #removeConditionBtn element that existed when the code was first run. If the table contents changed to include additional buttons, your binding wouldn't have updated (even if you were using class rather than ID). I've rewritten this using jQuery on on the table itself, so the click event will still fire even as the contents of the table change.

Working demonstration below:

var conditionString = "text";

$("#whereConditionTable").append(
  "<tr>" +
  "<td>" + conditionString + "</td>" +
  "<td><button class='removeConditionBtn' name='removeConditionBtn' class='btn btn-default'><img src='resources/images/removeWhereCondition.png' alt='Remove' width='25px' height='25px'></button>" +
  "<td>" +
  "<select class='where-Condition-Join-Combo' name='where-Condition-Join-Combo' class='form-control'>" +
  "<option value='1'>Join using</option>" +
  "<option value='2'>AND</option>" +
  "<option value='3'>OR</option>" +
  "</select>" +
  "</td>" +
  "</tr>"
);

$("#whereConditionTable").on("click", ".removeConditionBtn", function() {
  $(this).closest("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="whereConditionTable"></table>

Juho Enala · Accepted Answer · 2017-09-20 14:32:09Z

0

Apparently you are using jQuery. You could try:

$('#removeConditionButton').on('click', function(element) {
    $(element).closest('tr').remove();
})

By the way, it seem you are using id-property incorrectly. Id's should be unique and each page can have only one element with same id. In this case, you should use class instead of id.

answered Sep 20, 2017 at 14:32

Juho Enala

695 bronze badges

Collectives™ on Stack Overflow

Delete a table row on button click in Javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related