Copier ou cloner des éléments HTML avec jQuery
La méthode jQuery clone() va nous permettre de créer une copie profonde d’un élément ou d’une sélection d’éléments.
Une copie “profonde” signifie que l’élément ou la sélection d’éléments seront copiés ainsi que les éléments qu’ils contiennent et leurs contenus textuels.
Une fois la copie d’un élément réalisée avec clone(), on va pouvoir placer cet élément dans le document à l’aide de l’une des méthodes jQuery d’insertion de contenu dans le DOM (append(), prepend(), before(), after(), etc.).
See the Pen
Cours jQuery 2.5.1 by Pierre (@pierregiraud)
on CodePen.
Supprimer des éléments et des contenus HTML avec jQuery
Pour supprimer un élément ou un contenu du DOM, on va pouvoir utiliser les méthodes remove(), detach(), empty() ou unwrap.
La méthode remove() va nous permettre de supprimer un élément ou une collection d’éléments ainsi que tout ce qu’ils contiennent. De plus, toutes les données jQuery et les événements associés à ces éléments seront supprimés. On va pouvoir passer un sélecteur en argument de cette méthode qui va nous permettre de filtrer les éléments qui doivent être supprimés dans notre sélection de départ.
La méthode detach() va fonctionner exactement de la même façon que remove() mais les données jQuery associées aux éléments supprimés vont cette fois-ci pouvoir être conservées, ce qui peut être utile si on compte réinséré les éléments supprimés plus tard par exemple.
La méthode empty() va nous permettre de supprimer tout le contenu d’un ou de plusieurs éléments sans toutefois supprimer les éléments en eux mêmes (le balisage HTML sera conservé).
Finalement, la méthode unwrap() va nous permettre de supprimer l’élément parent d’un ou de plusieurs éléments. On va pouvoir lui passer un sélecteur en argument qui va servir de filtre pou ne supprimer le parent que s’il répond à un certain critère.
See the Pen
Cours jQuery 2.5.2 by Pierre (@pierregiraud)
on CodePen.
Remplacer des éléments HTML avec jQuery
jQuery va également nous permettre de supprimer des éléments du document et de les remplacer par d’autres. Pour faire cela on va pouvoir utiliser les méthodes replaceAll() ou replaceWith().
La méthode replaceAll() va prendre la sélection d’éléments à remplacer en argument. On va appliquer cette méthode sur l’élément qui va servir d’élément de remplacement.
La méthode replaceWith() va fonctionner dans l’autre sens : on va l’appliquer aux éléments qu’on souhaite supprimer et remplacer et on va lui passer le contenu de remplacement en argument.
Notez également que la méthode replaceWith() va retourner la liste des éléments supprimés à la différence de replaceAll() qui ne va rien retourner.
See the Pen
Cours jQuery 2.5.3 by Pierre (@pierregiraud)
on CodePen.
