[bloqué] .append & .html & .remove

fhdesign
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Salut à tous, je cherche un peu d'aide sur un script javascript ou je bloque.

Le problème:

Quand j'utilise la fonction ".append" pour lister des "div" dans un "textarea" avant de le "POST", le champs reste vide alors qu'il apparait dans l inspecteur.
Si j'utilise la fonction ".html" le champs se rempli sans souci, je dois récupérer le champ avec les insertions précédentes avant l insertion du nouvel objet.

<article class="list-group-item" id="accueil" onclick="upmenuaccueil()">
Accueil<span style="position:absolute;right:0;z-index:99999999999;padding-right:10px;font-size:18px;color:black;" class="fa fa-angle-right"></span></article>
</div>
<script>
function upmenuaccueil() {
menu = document.getElementById("menu").innerHTML;
$("#menupreview").append('<div id="menuaccueilprev"> Accueil<span id="removeaccueil" style="float:right" class="fa fa-window-close" onclick="accueilremove()"></span><hr></div>');
$("#menu").html(menu+'<li id="menuaccueil"><a href="../"> Accueil</a></li>');
};
function accueilremove() {
$('li#menuaccueil').remove();
$("div#menuaccueilprev").empty();
};
</script>```

Ce que je veux

Le but étant de pouvoir ajouter ou supprimer des <li></li> dans le textarea et que le textarea enregistre bien le contenu, ce qui n'est pas le cas avec .append.

Ce que j'obtiens

Là où je bloque c'est que si j'effectue les insertions avec la fonction ".append" je peux facilement annuler l insertion avec un .remove ou .empty mais le formulaire reste vide à l enregistrement. Mais si l'insertion se fait avec la fonction ".html" je ne peux pas supprimer les insertions situé dans un textarea.

Merci mille fois si quelques personnes peuvent m'aiguiller.

1 réponse

fhdesign
Auteur

Trouvé!


<div >
        <article class="list-group-item" id="accueil" onclick="upmenuaccueil()">
          Accueil<span  style="position:absolute;right:0;z-index:99999999999;padding-right:10px;font-size:18px;color:black;" class="fa fa-angle-right"></span></article>
      </div>
        <script>
        function upmenuaccueil() {
          menu = document.getElementById("menu").value;
      $("#menupreview").append('<div id="menuaccueilprev"> Accueil<span id="removeaccueil" style="float:right" class="fa fa-window-close" onclick="accueilremove()"></span><hr></div>');
      $("#menu").val(menu+'<li id="menuaccueil"><a href="../"> Accueil</a></li>');
    };
        function accueilremove() {
        $('#menu').val(function(index, value) {
        return value.replace('<li id="menuaccueil"><a href="../"> Accueil</a></li>', '');
        });
          $("div#menuaccueilprev").empty();  
        };
      </script>```