Comment supprimer champ d'entrée qui a été insérée via JavaScript

Question

Quelqu'un s'il vous plaît aidez-moi comment ajouter une nouvelle fonction pour supprimer le champ, j'ai fonction de script js qui ajoutent nouveau champ comme suit

<script language="javascript"> 
fields = 0; 
function addInput() { 
    if (fields != 10) { 
     var htmlText = "&nbsp;&nbsp;<input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />"; 
     var newElement = document.createElement('div'); 
     newElement.id = 'new_field'; 
     newElement.innerHTML = htmlText; 

     var fieldsArea = document.getElementById('new_field'); 
     fieldsArea.appendChild(newElement); 
     fields += 1; 

    } else { 
     alert("Only 10 fields allowed."); 
     document.form.add.disabled=true; 
    } 
} 
</script> 

mais j'ai besoin aide pour ajouter de nouvelles fonctions pour supprimer le champ, pour toute suggestion et pointeur je serais reconnaissant.

Answer 1

Lisez ici sur la fonction removeChild() removeChild() - mozilla developer

Modifier Ou ici: removeChild() w3schools

Answer 2

Tout d'abord, il y a déjà un problème que je vois avec votre code. Vous définissez l'ID de chaque nouveau champ à la même valeur, qui est un code HTML non valide et qui demande des problèmes. Assurez-vous de résoudre ce problème. Le .removeChild method des éléments DOM est ce que vous voulez. .removeChild supprime un nœud (élément ou texte) de l'arborescence DOM (l'ensemble des éléments réellement contenus dans le document) uniquement si le nœud transmis est en réalité un enfant de cet élément, sinon une erreur se produit.

Vous pouvez facilement supprimer le dernier champ en trouvant le last child de son contenant:

function removeLastField() { 
    var fieldsArea = document.getElementById('new_field'), 
     lastChild = fieldsArea.lastChild; 
    if(lastChild) { 
     fieldsArea.removeChild(lastChild); 
     fields -= 1; 
    } 
}