suppression d'une partie de la chaîne MISE À JOUR

Question

www.powersource.se

Le dernier lien, "Ajouter des éléments", ne fonctionne pas correctement. Il est censé ajouter un peu de texte lorsque vous appuyez dessus, puis supprimez le texte lorsque vous appuyez à nouveau dessus. J'ai fait le travail supplémentaire, mais je n'ai pas réussi à faire la suppression.

function add_module(title, text) 
{ 
container = document.getElementById('text-main'); 
the_text ='<div class="text-header" id="added-text-header">' + title + '</div><div id="added-text">' + text + '</div>'; 
if(container.innerHTML != container.innerHTML + the_text) 
{ 
container.innerHTML = container.innerHTML + the_text; 
}else if(container.div.innerHTML == container.innerHTML + the_text) 
{ 
text_container = container.getElementById('added-text-header'); 
parent = text_container.parentNode; 
parent.removeChild(text_container); 
text_container = container.getElementById('added-text'); 
parent = text_container.parentNode; 
parent.removeChild(text_container); 
} 
} 

Answer 1

Vous utilisez + pour ajouter du texte. Ainsi, JavaScript concatène deux chaînes.

Le problème vient lorsque vous essayez d'utiliser - pour supprimer. Cela ne marchera pas. Le signe moins sert à soustraire des nombres, pas à enlever quelque chose d'une chaîne.

Je suggère d'utiliser jQuery ou une autre bibliothèque JavaScript qui a une bonne manipulation DOM multi-navigateur. Lorsque vous insérez plus de texte, utilisez une fonction pour ajouter un morceau de HTML. Utilisez la balise p: <p>some text</p>. Ensuite, vous serez en mesure de traquer les balises p et supprimer le dernier.

Answer 2

Lorsque vous dites string1 + string2 vous créez en fait une nouvelle chaîne, + est juste un raccourci pour "écraser ces deux ensemble."

Si vous voulez pouvoir ajouter et supprimer ce texte, vous devrez le faire d'une autre manière. Le vrai problème est qu'une fois que vous avez concaténé les chaînes, vous n'avez aucune idée de quelle partie de la chaîne est l'original et quelle partie est celle de l'utilisateur.

En jQuery, vous pouvez utiliser la manipulation DOM pour mieux gérer cela. D'abord, je mettrais vos balises div avec l'en-tête de texte et le texte dans votre conteneur, mais laissez-les vides. De cette façon, vous n'avez pas à les créer à la volée. Puis (en supposant que votre div de texte a une classe de "corps de texte"):

var textHeader = $("#text-main .text-header"); 
var textBody = $("#text-main .text-body"); 

//If the header doesn't contain the title set it, otherwise remove it 
if(textHeader.text() != title) { 
    textHeader.text(title) 
} else { 
    textHeader.text(""); 
} 

//If the text body doesn't contain the text set it, otherwise remove it 
if(textBody.text() != text) { 
    textBody.text(text) 
} else { 
    textBody.text(""); 
}