Supprimer une ligne de tableau sur le bouton cliquer en Javascript

J'ai une table avec les 3 colonnes suivantes où chaque ligne est ajoutée dynamiquement.Supprimer une ligne de tableau sur le bouton cliquer en Javascript

Condition: Est-ce une simple clause WHERE chaîne instruction conditionnelle
Supprimer: Un bouton qui supprime cette ligne (supprime une condition)
Joignez-vous à: Une liste déroulante combo

Lorsque la l'utilisateur clique sur le bouton Supprimer, cette ligne particulière doit être supprimée.

J'ai écrit le code pour cela, mais rien ne se passe et je ne reçois aucune erreur sur la console.

code dans le contexte

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

Toutes les suggestions à cet égard seront très appréciés.

Source

2017-09-20 Nayantara Jeyaraj

Peu de choses à corriger:

Vous combinez jQuery et JavaScript vanille (getElementById), donc j'ai mis de l'ordre certains de cela et réécrites comme jQuery.
Les documents HTML ne peuvent pas avoir de répétition ID s. Si votre append fonctionnait plus d'une fois, il créait des éléments supplémentaires #removeConditionBtn et #where-Condition-Join-Combo, et JS cessait de fonctionner. J'ai changé ceux-ci en classes, qui sont réutilisables.
Votre addEventListener pour lier un événement click allait seulement se lier à (un) élément #removeConditionBtn qui existait lorsque le code a été la première course. Si le contenu de la table a été modifié pour inclure des boutons supplémentaires, votre liaison n'aurait pas été mise à jour (même si vous utilisiez une classe plutôt qu'une ID). J'ai réécrit cela en utilisant jQuery on sur la table elle-même, donc l'événement click continuera de se déclencher même si le contenu de la table change.

démonstration de travail ci-dessous:

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>

Source

2017-09-20 14:30:23

Merci. Cela a réellement aidé. –

Apparemment, vous utilisez jQuery. Vous pouvez essayer:

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

Par ailleurs, il semble que vous utilisez id-propriété de manière incorrecte. Les ID doivent être uniques et chaque page peut avoir un seul élément avec le même identifiant. Dans ce cas, vous devez utiliser class au lieu de id.

Source

2017-09-20 14:32:09

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>

Source

2017-09-20 14:41:45

Supprimer une ligne de tableau sur le bouton cliquer en Javascript

Répondre

Questions connexes