2017-01-23 135 views
1

我有一个表单,并尝试删除按钮单击它。从香草DOM删除元素javascript

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
</head> 
<body> 
    <button onclick="remove()">remove</button> 

    <form action="test.html" class="contactForm" dir="ltr" enctype="multipart/form-data" method="post"> 
     <ol> 
      <li class="csc-form-9 csc-form-element csc-form-element-textline"> 
       <label for="field-9">Vorname</label> 
       <input class="inputFormText" id="field-9" name="tx_form[firstname]" type="text"/> 
      </li> 
      <li class="csc-form-10 csc-form-element csc-form-element-textline"> 
       <label for="field-10">Nachname</label> 
       <input class="inputFormText" id="field-10" name="tx_form[lastname]" type="text"/> 
      </li> 

     </ol> 
    </form> 

    <script> 
    function remove() 
    { 
     var x = document.getElementsByClassName("contactForm"); 

     console.log(x); 

     x.remove(); 
    } 
    </script> 

</body> 
</html> 

根据this article应该仅由DOM元素上调用remove()成为可能。然而,我得到:

(index):30 Uncaught TypeError: x.remove is not a function at remove ((index):30) at HTMLButtonElement.onclick ((index):7)

回答

4

getElementsByClassName方法返回元件的阵列状的集合,因此通过索引获得的元素。

x[0].remove(); 

或者使用querySelector方法来获取一个元素。

var x = document.querySelector(".contactForm"); 
2
var x = document.getElementsByClassName("contactForm")[0];