我怎样才能删除 HTML 文档的内容，只用 JavaScript 留下文档的选定部分？

Question

I am making a simple quiz making website for my portfolio.我正在为我的投资组合制作一个简单的测验制作网站。 There are two buttons for adding questions and answers, when you add questions and answers underneath the fieldset containing the "add question/answer" buttons pops up a preview of the quiz you`ve made.有两个用于添加问题和答案的按钮，当您在包含“添加问题/答案”按钮的字段集下添加问题和答案时，会弹出您所做的测验的预览。 After you add some questions and answers you can press a "create" button on the bottom of the page.添加一些问题和答案后，您可以按页面底部的“创建”按钮。 I want to add an eventListener to that button so that when it is pressed everything besides the "preview" fieldset is cleared from the document.我想向该按钮添加一个 eventListener，这样当它被按下时，除了“预览”字段集之外的所有内容都会从文档中清除。 Is there an easier way than removing all elements with the body.removeChild()?有没有比使用 body.removeChild() 删除所有元素更简单的方法？

Thanks for any replies this recieves.感谢您收到的任何回复。 I am new to stackoverflow so I apologize if a break an unwritten rule with the way I structured my question.我是 stackoverflow 的新手，所以如果我以构建问题的方式打破不成文的规则，我深表歉意。

The code in question:有问题的代码：

<body id="quiz-body">
    <h1>Let`s make a quiz</h1>
    <form id="quiz-form">
        <fieldset class="quiz-type" id="quiz-type">
            <label>Will this quiz be anonymous:</label>
            <label for="anonymous-quiz"
            ><input
              id="anonymous-quiz"
              type="radio"
              name="quiz-type"
              class="inline"
              value="anonymous"
              checked
            />
            Yes, do not require participant name.</label>
            <label for="non-anonymous-quiz"
              ><input
                id="non-anonymous-quiz"
                type="radio"
                name="quiz-type"
                class="inline"
                value="non-anonymous"
              />
              No, do require participant name.</label
            >

            </fieldset>
        <fieldset class="fieldset">
            <label>Add a question:</label>
            <input type="text" id="question-input">
            <button type="button" id="add-question" class="add__Question"><span class="material-symbols-outlined">
                add
                </span></button>
        </fieldset>
        <fieldset id="answersDisplay" class="answers__Display">
            <p id="added-question"></p>
            <label>Add answer:</label>
            <input type="text" id="answer">
            <label for="true">
            <input  class="check" id="true-answer" type="radio" name="answer-value" value="true" checked>True</label>
            <label for="false">
                <input class="check" id="false-answer" type="radio" name="answer-value" value="false">False</label>
            <button type="button" id="add-answer" class="add__Answer"><span class="material-symbols-outlined">
            add
            </span></button>
        </fieldset>
        </fieldset>
    <div id="preview-container">
        <h2>Preview</h2>
        <fieldset id="preview">
            <input type="text" id="name-input" placeholder="Please enter your name">
        </fieldset>
    </label>
    </div>
    <button id="create-quiz">Create</button>
    <script type="text/javascript" src="quiz.js"></script>
</form>
</body>

I wish to remove everything besides the "preview-container" div.我希望删除除“preview-container”div 之外的所有内容。 I apologise for the monstrosity that this is.我为这太可怕了道歉。

Answer 1

Try this one试试这个

    buttonId.onclick = () => {
      const element = document.getElementById("elementID");
      element.innerHTML = '';
      // or
      element.style.display = 'none';
    }
    <div id='elementID'>
      <span>Hello</span>
      <span>Test</span>
    </div>
    <button id='buttonId'>Remove via innerHTML</button>

我怎样才能删除 HTML 文档的内容，只用 JavaScript 留下文档的选定部分？

问题描述

1 个解决方案

解决方案1
0 2022-12-20 10:47:05

我怎样才能删除 HTML 文档的内容，只用 JavaScript 留下文档的选定部分？

问题描述

1 个解决方案

解决方案1 0 2022-12-20 10:47:05

解决方案1
0 2022-12-20 10:47:05