html - Delete a table row on button click in Javascript

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 bo

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.

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 bo

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.

Share Improve this question edited Sep 20, 2017 at 15:14 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Sep 20, 2017 at 14:19 Nayantara Jeyaraj 2,7067 gold badges36 silver badges65 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 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>

Few things to fix:

You're bining 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Delete a table row on button click in Javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)