如何删除在JavaScript中具有数据类型字符串的HTML元素？
我正在尝试重新设计测验模板，该模板只允许用户在禁用其他选项之前选择一个答案。用户应该能够在提交之前选择另一个答案（第一个删除）。
如果选择了一个新答案，我可以删除突出显示的颜色类：
answer.classList.remove("correct");
如何删除“ tick”图标的元素：
let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>';
从此父元素中：
'<div class="option"><span>'+ multiple_choice_option[i] +'</span></div>'
当选项设置为这样：
const option = option_list.querySelectorAll(".option");
for(i=0; i < option.length; i++)
{
option[i].setAttribute("onclick", "optionSelected(this);");
}//end for
添加tickicontag时：
answer.insertAdjacentHTML("beforeend",tickIconTag);
我有尝试了多种方法，但主要问题是：
1。使用答案。Intertadjacenthtml（“ trefornend”，blankelement）向内移动tick tick未删除
2.使用tickicontag.remove（）给出了错误“ tickicontag.remove.remove.remove不是函数”
3。使用答案。Removechild（tickicontag）给出错误“参数1不是类型节点”。
如何将同一元素确切设置为空白，而不将其移动或删除？
这是我尝试用空白替换元素时发生的情况。 绿色tick移动但未删除
I am trying to redesign a quiz template that only allows users to choose one answer before the other options are disabled. The user should be able to choose another answer (erasing the first) before submitting.
I can remove the highlighted color class if a new answer is chosen:
answer.classList.remove("correct");
How do I remove the element for the 'tick' icon:
let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>';
from this parent element:
'<div class="option"><span>'+ multiple_choice_option[i] +'</span></div>'
when the option is set like this:
const option = option_list.querySelectorAll(".option");
for(i=0; i < option.length; i++)
{
option[i].setAttribute("onclick", "optionSelected(this);");
}//end for
and the tickIconTag is added like this:
answer.insertAdjacentHTML("beforeend",tickIconTag);
I have tried multiple ways but the main issue is that:
1.Using answer.insertAdjacentHTML("beforeend", blankelement) shifts tick inward not removed
2.Using tickIconTag.remove() gives the error "tickIconTag.remove is not a function"
3.Using answer.removeChild(tickIconTag) give the error "Parameter 1 is not of type node".
How can I set precisely the same element to blank and not shift it or remove it?
This is an image of what happens when I try to replace the element with a blank one.
Green tick shifted but not removed
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
纯CSS解决方案
这是< a href =“ https://developer.mozilla.org/en-us/docs/web/html/element/element/input/radio” rel =“ nofollow noreferrer”> radiogrouplist 。单击图I 中的每个圆圈。
图i
请注意，每个元素的
名称是相同的a1。这允许一组广播按钮具有相互排他性。用
＆lt; label＆gt;a>使用每个广播按钮，以及一些CSS，我们可以在没有JavaScript的情况下重新创建OP中的内容。＆lt; label＆gt;s具有独特的功能，其中它们可以与a表单控件通过为属性分配＆lt; label＆gt;是带有上述表单控制的Insanc同一页面。参见图II 。图II
在CSS中，以下规则集允许
＆lt; label＆gt;每当检查复选框时更改：图III III
in 图IV IV IV iv iv 每个
> ＆lt; label＆gt;与隐藏的广播按钮关联。用户只会看到＆lt; label＆gt;。同样，图IV 中的示例具有响应性。图IV
Pure CSS Solution
That's the exact behavior of a RadioGroupList. Click each circle in Figure I.
Figure I
Notice the
nameof each element is the sameA1. This allows the group of radio buttons to have mutual exclusivity.With a
<label>associated with each radio button, and some CSS we can recreate what is in the OP without JavaScript.<label>s have a unique feature in which they can be associated with a form control by assigning theforattribute with the value of a form control's #id. Once associated a<label>is insync with said form control so that if the<label>was clicked, so to does the form control as long as both are on the same page. See Figure II.Figure II
In the CSS the following ruleset allowed the
<label>to change whenever the checkbox was checked:Figure III
In Figure IV each
<label>is associated to a hidden radio button. The user will only see and interact with the<label>. Also, the example in Figure IV is responsive.Figure IV