Je veux créer une liste de choses à faire .... Les boutons Ajouter et Supprimer fonctionnent, mais je veux supprimer un élément lorsque je clique dessus ... j'ai essayé avec jQuery mais cela ne fonctionne pas quand je clique sur le JavaScript Éléments générés, mais lorsque je teste sur un élément HTML initial sur la page, cela fonctionne. Quel est le problème ? Voici le code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
<script>
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
function sterge() {
var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);
}
$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});
</script>
</body>
</html>
3 Réponses :
Essayez celui-ci:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
</body>
</html>
Il veut éliminer des éléments individuels, je pense. Donc, il devrait être $ (ceci) .hide (); ou $ (ceci) .Remove (); .
@Sc s'il vous plaît, n'oubliez pas de vérifier comme réponse si elle vous a utile
Lorsque votre code exécute les auditeurs d'événements des éléments P, vos éléments n'existent pas, ils ne sont donc pas évoqués par l'enregistrement de l'auditeur d'événement. Vous devez ajouter l'écouteur d'événement après avoir créé l'élément P. Essayez quelque chose comme:
Il existe de quoi ce qu'on appelle délégation d'événement - apprendre.jQuery .com / événements / événement-délégation / # Introduction
L'élément P n'existe pas avant de cliquer sur le bouton et exécutez la fonction adauga (), vous ne pouvez donc pas lier l'événement de clic à un élément qui n'existe pas encore, vous devez lier l'événement de clic dans Votre ADAUGA () fonction comme ci-dessous: ou exécutez la fonction lorsque la page est prête: p> $(document).ready(function(){
adauga();
$("body").on("click","p", function(){
$("p").hide();
});
});
Dupliqué possible de contraignation des événements sur des éléments créés de manière dynamique?