正在删除没有html对应项的Javascript元素

Question

此代码可能需要一些帮助。目的是点击"；"检查"；并且显示错误/正确的图像。然而重置按钮不重置在"重置"之后产生的图像；检查"；按钮因此，如果你按下10次"；"检查"；正确/错误的图像将连续出现10次。我的问题是？

• 是否可以在按下"；检查">
• 按钮"；重置"；也取消显示图像就像文本一样

我已经在下面发布了代码，但如果有eror，这里是jfiddlehttps://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

给它们一个类并删除它们

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>