Delete``` où nous utilisons l'attribut id comme "deleteBt"/> Delete``` où nous utilisons l'attribut id comme "deleteBt">

Maison  >  Article  >  interface Web  >  Comment supprimer des données en HTML

Comment supprimer des données en HTML

PHPz
PHPzoriginal
2023-04-23 10:21:00710parcourir

Dans le développement Web, la manipulation des données est l'une des parties les plus fondamentales et les plus importantes, et la suppression des données est inévitable. Cet article expliquera comment effectuer des opérations de suppression de données en HTML.

1. Création de boutons de suppression

En HTML, nous utilisons généralement des boutons pour déclencher des opérations de suppression. Tout d'abord, nous devons ajouter un bouton de suppression à la page, par exemple :

<button id="deleteBtn">删除</button>

Parmi eux, nous utilisons l'attribut id comme "deleteBtn", qui doit faciliter notre fonctionnement en JavaScript. Ensuite, nous devons ajouter le code d'opération de suppression correspondant en JavaScript.

2. Supprimer le code de l'opération

Tout d'abord, en JavaScript, nous devons obtenir les données qui doivent être supprimées. Par exemple, nous utilisons l'identifiant comme "données" pour représenter les données que nous devons supprimer. Le code est le suivant :

<div id="data">
  <!-- 数据内容 -->
</div>

Ensuite, nous ajoutons le code de l'opération de suppression :

document.getElementById("deleteBtn").addEventListener("click", function() {
  var data = document.getElementById("data");
  data.parentNode.removeChild(data); // 删除数据
});

Dans le code ci-dessus, nous utilisons addEventListener. fonction pour ajouter un clic au bouton Supprimer Événement, lorsque le bouton est cliqué, la fonction derrière lui sera exécutée. Dans cette fonction, les données qui doivent être supprimées sont d'abord obtenues, puis supprimées de la page via les méthodes parentNode et RemoveChild pour réaliser la suppression des données.

3. Confirmation de suppression

Lors d'une opération de suppression de données, afin d'éviter une mauvaise opération, il est généralement nécessaire d'ajouter une boîte de confirmation pour confirmer si l'utilisateur a réellement besoin de supprimer les données. En HTML, nous pouvons utiliser la méthode window.confirm pour implémenter cette fonction :

document.getElementById("deleteBtn").addEventListener("click", function() {
  if (window.confirm("是否确定删除该数据?")) {
    var data = document.getElementById("data");
    data.parentNode.removeChild(data);
  }
});

Dans le code ci-dessus, nous avons ajouté une instruction if et utilisé la méthode window.confirm pour faire apparaître une boîte de confirmation lorsque l'utilisateur confirme la suppression, l'opération de suppression sera exécutée.

IV.Résumé

Cet article présente comment effectuer des opérations de suppression de données en HTML, impliquant principalement la création de boutons de suppression, la mise en œuvre de codes d'opération de suppression et l'ajout de fonctions de confirmation de suppression. J'espère que cet article pourra vous aider à comprendre l'opération de suppression de données en HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn