Question

我做了一些小项目，在DOM中添加了元素。它正在工作，但是提交后我不知道如何清除表格。我需要分配一个空白值吗？在什么时候？对不起，我是新来的，请不要咬。谢谢。

const addElement = (e, node, txt, attr, value) => {
    e.preventDefault();
    const element = document.createElement(node); 
    if(txt){
        const text = document.createTextNode(txt); 
        element.appendChild(text); 
    }
    if(attr){
        element.setAttribute(attr, value)
    }
    document.querySelector('.content').appendChild(element);
}

const addForm = document.querySelector('.form--add');
addForm.addEventListener('submit', (e) => addElement(
    e, 
    addForm.elements.node.value,
    addForm.elements.text.value,
    addForm.elements.attr.value,
    addForm.elements.value.value,
));

<div class="form-container">
    <form class="form form--add"> 
        <h1 class="form__title">Add element to DOM</h1>
        <input type="text" class="form__input" name="node" placeholder="element html" required>
        <input type="text" class="form__input" name="text" placeholder="txt in element html">
        <input type="text" class="form__input" name="attr" placeholder="attr" required>
        <input type="text" class="form__input" name="value" placeholder="attr value" required>
        <button class="form__button">Add element</button>
    </form>
    <form class="form form--search"> 
        <h1 class="form__title">Search DOM</h1>
        <input type="text" class="form__input" placeholder="szukana nazwa elementu" required>
        <input type="submit" class="form__button" value="znajdź i pokaż informacje">
    </form>
</div>
<div class="result"></div>
<div class="content"></div>
<footer class="footer">Stopka</footer>
<script src="main.js"></script>

谢谢

Answer 1

尝试addForm.reset()

或

为假设form_id声明一个ID，然后在提交后粘贴以下代码

document.getElementById("form_id ").reset();

Answer 2

addForm.addEventListener('submit', (e) => addElement(
      e,
      addForm.elements.node.value,
      addForm.elements.text.value,
      addForm.elements.attr.value,
      addForm.elements.value.value,
      addForm.getElementsByTagsName('input').forEach(el => {
        el.value = ''
      })
    ));

提交后如何清除表格

2 个答案: