2015-08-04 3 views
1

Я довольно неопытный с JavaScript, и после довольно многого поиска и просмотра других потоков мне сложно определить, как я могу динамически удалять поле из в форме, похожей на мой вариант использования (или, скорее всего, я просто не получаю!).Как найти родительский узел и удалить дочерний элемент

Я понимаю, что элемент не может быть удален из DOM без ссылки на родительский узел. Тем не менее, я не совсем уверен, что я должен ссылаться на родительский узел в моем коде при использовании removeChild(). Я подозреваю, что это что-то в моем HTML; было бы здорово, если бы кто-то мог указать мне в правильном направлении.

<div> в HTML <body>

<div class="wrapper"> 
     <div class="sidebar" text-align="center"> 
      myFormFieldLabel <button onclick="myFunction()">add</button></p> 
     </div>   
     <div class="main" text-align="center"> 
      <form name="myForm" action="/" method="POST"> 
       some text goes here. 
     </br> 
      <hr> 
     </br> 
      <div class="fields" id="rf1"> 
      <!--added form fields will appear here--> 
      </div></p> 
     </div> 
     <div class="submit"> 
      <input type="submit" value="Submit" /> 
      </form> 
     </div> 
</div> 

JavaScript, который создает поле динамически:

function myFunction(){ 
    var r = document.createElement('span'); 
    var y = document.createElement("INPUT") 
    var p = document.createElement('p'); 
    var g = document.createElement("IMG"); 
    y.setAttribute("type", "text"); 
    y.setAttribute("placeholder", "myFormField"); 
    g.setAttribute("src", "delete.png"); 
    g.setAttribute("onclick", //should remove entire form input field(span)//); 
    increment(); 
    y.setAttribute("Name", "myField" + "~input_" + i); 
    r.appendChild(y); 
    r.appendChild(g); 
    r.appendChild(p); 
    document.getElementById("rf1").appendChild(r); 
} 

Обычно ошибка я нарваться при настройке кода здесь и там Uncaught TypeError: Cannot read property 'removeChild' of null

+0

Я действительно хочу предложить использовать JQuery для этого ... но тогда я только теперь понимаю, что я не могу даже код, используя родной язык. Теперь я ненавижу себя. – Gideon

ответ

2

Чтобы удалить узел из вашего документа, вы должны сначала указать его идентификатор из вашего кода JavaScript. Это значительно облегчит удаление программно позже.

Например:

var r = document.createElement("span"); 
r.id = "myID"; 
var y = document.createElement("INPUT") 
var p = document.createElement('p'); 
var g = document.createElement("IMG"); 
... 
// Later 
var p = document.getElementById("myID"); 
p.parentNode.removeChild(p); 
+0

Если я чего-то не упускаю, кажется, что удаляет сам элемент изображения. Мне нужно удалить весь тег ''. При подстановке в переменной для '' происходит ошибка 'Can not read property 'removeChild' of null. – Jamil

Смежные вопросы