динамически удалять элементы формы с помощью javascript

Я хочу динамически удалять элементы формы с помощью javascript. Код ниже прост и динамически добавляет элементы формы.динамически удалять элементы формы с помощью javascript

Моя форма выглядит как (извините, пытался получить его работу в jsfiddle, но не мог определенно работает на собственных серверах, хотя.):

«первое имя» «фамилия», «возраст»
Добавить больше данных (кнопка) Добавить (кнопка)

Если нажать на Добавить больше данных вы получите

«первое имя» «фамилия», «возраст»
«первое имя» «фамилия», «возраст» "remove (button)"
Добавить дополнительные данные (butto n) Отправить (кнопка)

Я записываю каждую новую строку через fooID + x + i. Например, при первом добавлении элемента формы «имя» будет называться «foo10», «фамилия» будет «foo11» и так далее.

Как исправить нижеследующее, чтобы динамически удалять элементы формы, на которые нужно щелкнуть, чтобы их удалить?

<script language="javascript"> 
function removeRow(r) 
{ 
/********************* 
Need code in here 
*********************/ 
} 
</script> 

var x = 1; 

function add() { 
var fooId = "foo"; 

for (i=1; i<=3; i++) 
    { 
    //Create an input type dynamically. 
    var element = document.createElement("input"); 

    //Assign different attributes to the element. 
    element.setAttribute("type", fooId+x+i); 
    element.setAttribute("name", fooId+x+i); 
    element.setAttribute("id", fooId+x+i); 

    if(i==1){ 
      element.setAttribute("value", "First name"); 
    } 
    if(i==2){ 
      element.setAttribute("value", "Last name"); 

    } 
    if(i==3){ 
     element.setAttribute("value", "age"); 

    }   
    var foo = document.getElementById("fooBar"); 
    foo.appendChild(element); 
    foo.innerHTML += ' '; 

} 
     i++;    
      var element = document.createElement("input"); 
element.setAttribute("type", "button"); 
element.setAttribute("value", "Remove"); 
element.setAttribute("id", fooId+x+i); 
element.setAttribute("name", fooId+x+i);  
element.setAttribute("onclick", "removeRow(this)"); 
foo.appendChild(element); 

    var br = document.createElement("br"); 
foo.appendChild(br); 

x++; 

} 
</SCRIPT> 

<body> 
<center> 

<form id="form" name="form" action="test.php" method="post" enctype="multipart/form-data"> 

<input type="text" id="foo01" name="foo01" value="first name"> 

<input type="text" id="foo02" name="foo02" value="last name"/> 
<input type="text" id="foo03" name="foo03" value="age"> 
<br> 
<span id="fooBar"></span> 

<FORM> 

<INPUT type="button" value="Add more data" onclick="add()"/> 
<input type="submit" value="Submit"> 
</center> 
</FORM> 

</form> 

</body>

источник

2013-08-22 user2484214

Почему вы включаете один 'form' элемент в другой? –

Это будет работать для вас:

function removeRow(r) 
{ 
    var fooId = "foo"; 
    var id = r.id.substring(3,r.id.length-1); 
    for(i=1;i<=3;i++) 
    { 
     document.getElementById(fooId+id+i).remove(); 
    } 
    document.getElementById(fooId+id+5).nextSibling.remove(); 
    document.getElementById(fooId+id+5).remove(); 
}

источник

2013-08-22 07:07:17

По моему разумению вы хотите удалить полностью DIV, в котором ваш

"first name" "last name" "age" "remove (button)"

существует. Простое событие проверки кнопкой мыши и удалить этот родительский DIV, используя код ниже: -

$('#removeButtonID').click(function(){ 

    $(this).parent('div').remove(); 
});

Pure Javascript: -

function removeRow(r) 
{ 
    var d = document.getElementById('myDiv');//Parent Div ID 
    var olddiv = document.getElementById(r); 
    d.removeChild(olddiv); 
}

источник

2013-08-22 06:48:52 Roopendra

пользователь использует чистый javascript. – palerdot

Если вы хотите удалите элемент, вам нужно получить родительскую и дочернюю ссылку, используйте следующую функцию для удаления этого элемента:

parent.removeChild(child);

Проверить эту ссылку для лучшего понимания:

http://www.w3schools.com/htmldom/dom_elements.asp

источник

2013-08-22 07:09:08 Aashray

динамически удалять элементы формы с помощью javascript

ответ

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