删除没有 html corespondent 的 Javascript 元素

Question

Might need some help with this code. The purpouse is to click "check" and to display the image of wrong/right. Yet, the reset button doesn't reset the images spawned after the "Check" button. So, if u press 10 times "check" the right/wrong images will appear 10 times in a row. My questions would be?

• Is it possible to DO NOT display more than one image after pressing "Check?"
• Is it possible for the button "Reset" to un-display the images aswell as the text does?

I've posted the code below, but if any erors, here is the jfiddle https://jsfiddle.net/angelsmall13/xy5mkcz2/

 var answers = { "q1": ["doesn't", "does not"], "q2": ["hasn't", "has not"], "q3": ["yes","no"] }; function markAnswers(){ $("input[type='text']").each(function(){ console.log($.inArray(this.value, answers[this.id])); if($.inArray(this.value, answers[this.id]) === -1){ $(this).parent().append("<img src=' https://i.ibb.co/c3hgCsQ/wrong.jpg' />"); } else { $(this).parent().append("<img src='https://i.ibb.co/w0ttgPg/check.jpg' />"); } }) } function myFunction() { document.getElementById("form").reset(); } $("form").on("submit", function(e){ e.preventDefault(); markAnswers(); $(".table").html(tableDefault); });

 #submit { background-color: darkgreen; /* Green */ border-radius: 50px; border: none; color: white; padding: 13px 50px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }

 <form id="form"> <ol> <li>He <input id="q1" type="text" /> like football.</li> <li>He <input id="q2" type="text" /> got any money.</li> <li>He <input id="q3" type="text" /> got any money.</li> </ol> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <input id="q1" type="text" /> Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining <input id="q1" type="text" /> essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <input type="submit" id="submit" value="Result" /> <input type="button" onclick="myFunction()" value="Reset form"> </form>

Answer 1

Give them a class and remove them

 var answers = { "q1": ["doesn't", "does not"], "q2": ["hasn't", "has not"], "q3": ["yes","no"] }; function markAnswers(){ $("input[type='text']").each(function(){ console.log($.inArray(this.value, answers[this.id])); if($.inArray(this.value, answers[this.id]) === -1){ $(this).after("<img class='grade' src=' https://i.ibb.co/c3hgCsQ/wrong.jpg' />"); } else { $(this).after("<img class='grade' src='https://i.ibb.co/w0ttgPg/check.jpg' />"); } }) } function myFunction() { document.getElementById("form").reset(); $(".grade").remove(); } $("form").on("submit", function(e){ e.preventDefault(); markAnswers(); // $(".table").html(tableDefault); });

 #submit { background-color: darkgreen; /* Green */ border-radius: 50px; border: none; color: white; padding: 13px 50px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <ol> <li>He <input id="q1" type="text" /> like football.</li> <li>He <input id="q2" type="text" /> got any money.</li> <li>He <input id="q3" type="text" /> got any money.</li> </ol> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <input id="q1" type="text" /> Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining <input id="q1" type="text" /> essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <input type="submit" id="submit" value="Result" /> <input type="button" onclick="myFunction()" value="Reset form"> </form>