jquery supprime la valeur reçue

Dans le développement front-end, il est souvent nécessaire de supprimer ou de modifier les données saisies par les utilisateurs. jQuery est une bibliothèque JavaScript populaire qui fournit de nombreuses méthodes pratiques pour manipuler les éléments HTML et CSS. Dans cet article, nous apprendrons comment supprimer les valeurs reçues à l'aide de jQuery.

1. Utilisez la méthode .val() pour obtenir la valeur de la zone de saisie

Avant d'utiliser jQuery pour effectuer l'opération de suppression, nous devons obtenir la valeur de la zone de saisie. Vous pouvez utiliser la méthode .val() pour obtenir la valeur de la zone de saisie. Par exemple :

var inputValue = $('#inputBox').val();

Dans le code ci-dessus, $ représente la bibliothèque jQuery et #inputBox représente la zone de saisie en HTML avec l'attribut id de inputBox. La méthode val() attribue la valeur de la zone de saisie à la variable inputValue.

2. Utilisez la méthode .replace() pour supprimer la chaîne spécifiée

Une fois que nous avons obtenu la valeur dans la zone de saisie, nous pouvons utiliser la méthode replace() pour supprimer la chaîne spécifique. Par exemple, en supposant que nous souhaitons supprimer tous les espaces dans la zone de saisie, nous pouvons utiliser le code suivant :

inputValue = inputValue.replace(/s+/g, '');

Dans le code ci-dessus, /s+/g est une expression régulière qui peut correspondre à tous les espaces dans la valeur de la zone de saisie. g signifie recherche et remplacement global. La méthode

replace() remplace tous les espaces correspondants par des chaînes vides. Désormais, la variable inputValue ne contiendra plus aucun espace.

3. Utilisez la méthode $.trim() pour supprimer les espaces des deux côtés de la chaîne

Si nous voulons uniquement supprimer les caractères d'espace avant ou après la valeur de la zone de saisie, nous pouvons utiliser la méthode $.trim(). Par exemple, le code suivant supprimera les espaces de début et de fin de la valeur de la zone de saisie :

inputValue = $.trim(inputValue);

Dans le code ci-dessus, la méthode $.trim() entrera la valeur de la zone de saisie et supprimera les caractères d'espace des deux côtés. Désormais, la variable inputValue ne contiendra que des caractères autres que des espaces.

4. Supprimer le contenu d'un élément HTML

jQuery fournit également un moyen de supprimer le contenu d'un élément HTML spécifique. Par exemple, si nous voulons supprimer le contenu de l'élément div avec la sortie id, nous pouvons utiliser le code suivant : La méthode

$('#output').empty();

empty() supprimera tous les éléments enfants de l'élément spécifié et leur contenu texte.

5. Appliquer l'action de suppression à l'événement de clic sur le bouton

Enfin, nous pouvons appliquer l'action de suppression à l'événement de clic sur le bouton réel. Par exemple, le code suivant supprimera tous les espaces dans la zone de saisie lorsque le bouton est cliqué :

<input type="text" id="inputBox" value=" This is a sample input. " />
<button id="deleteButton">Delete Spaces</button>

<script>
  $('#deleteButton').click(function() {
    var inputValue = $('#inputBox').val();
    inputValue = inputValue.replace(/s+/g, '');
    $('#inputBox').val(inputValue);
  });
</script>

Dans le code ci-dessus, le code de la méthode click() sera exécuté lorsque le bouton est cliqué. Le code prend la valeur de la zone de saisie, supprime tous les espaces et la réinjecte dans la zone de saisie à l'aide de la méthode .val().

Résumé :

Dans cet article, nous avons appris comment supprimer une valeur reçue à l'aide de jQuery. Nous avons appris à supprimer les espaces des chaînes à l'aide de la méthode .replace() et de la méthode $.trim(), et à supprimer le contenu des éléments HTML à l'aide de la méthode .empty(). Enfin, nous appliquons l'action de suppression à l'événement de clic sur le bouton pour démontrer comment ces actions s'articulent. J'espère que cet article vous a aidé à mieux comprendre comment supprimer une valeur reçue à l'aide de jQuery.

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!