1
votes

Supprimer l'élément
de
en un clic sans actualiser la page

Pour le moment, je dois supprimer un élément li créé par jQuery après avoir cliqué dessus.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My New Pen!</title>
  <link rel="stylesheet" href="styles/index.processed.css">
</head>

<body>
  <h1>What do you like?</h1>
  <form id=likeform>
    <input name=thing placeholder="a thing you like" size=30>
    <input type=submit>
  </form>

  <ul id=likes></ul>
  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
  <script src="scripts/index.js"></script>
</body>

</html>

(function() {
  $(document).ready(function() {
    $("#likeform").submit(function(event) {
      var input = $(this).children("input[name='thing']")
      var thing = $(input).val()
      $("#likes").append("<li>" + thing + "</li>")
      $(input).val("")
      event.preventDefault()
    })
  })
  var li = $('<li/>')
    .onclick(function() {
      $(this).remove()
    })
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

}

Actuellement, cela a réussi sauf si j'ai besoin pour recharger manuellement la page pour que la modification prenne effet

javascript jquery html

2 commentaires

Est-ce que c'est ce que tu dis? 1. charger la page 1. cliquer 1. observer un mauvais comportement 1. recharger la page 1. tout va bien

oui, je charge la page et ajoute un élément, clique sur cet élément, actualise et il supprime

3 Réponses :

1
votes

Votre problème est ici:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>What do you like?</h1>
<form id=likeform>
  <input name=thing placeholder="a thing you like" size=30>
  <input type=submit>
</form>

<ul id=likes></ul>

Tout d'abord, vous n'avez pas besoin des opérateurs de comparaison ( , > ) car JQuery sélectionnera les éléments par leurs noms de balises. De plus, vous ne pouvez pas ajouter d'écouteurs d'événements de la manière "normale" sur des éléments créés dynamiquement.

Ceci est discuté à droite ici .

Pour résoudre votre problème, remplacez ce qui précède par ceci:

(function() {
  $(document).ready(function() {
    $("#likeform").submit(function(event) {
      var input = $(this).children("input[name='thing']")
      var thing = $(input).val()
      $("#likes").append("<li>" + thing + "</li>")
      $(input).val("")
      event.preventDefault()
    })
  })
  var li = $(document).on("click", "li", function() {
    $(this).remove();
  });
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

}

Exemple de travail:

$(document).on("click", "li", function() {
    $(this).remove();
});

var li = $('<li/>').onclick(function() {
    $(this).remove()
});

0 commentaires

0
votes

Je pense que c'est essentiellement ce que vous essayez de faire:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>

$('li').each(function (i) {
  $(this).click(() => $(this).remove());
});

0 commentaires

0
votes

pourriez-vous essayer de suivre.

(function() {
  $(document).ready(function() {
    $("#likeform").submit(function(event) {
      var input = $(this).children("input[name='thing']")
      var thing = $(input).val()
      $("#likes").append("<li>" + thing + "</li>")
      $(input).val("")
      event.preventDefault()
    })
  })
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

}
$(document).on("click", "#likes li", function(){
 $(this).remove();
});

0 commentaires

Supprimer l'élément de en un clic sans actualiser la page

Supprimer l'élément
de
en un clic sans actualiser la page