need a script

Message

veilig · Post by **veilig** » Sat Oct 21, 2006 8:03 pm

I been looking around for a script to do this, but I haven't found one yet. so if anyone knows of one please let me know.
EXAMPLE:

Answer 1: [ text input field ] [url=http://#]remove[/url]
Answer 2: [ text input field ] [url=http://#]remove[/url]
Answer 3: [ text input field ] [url=http://#]remove[/url]

[url=http://#]Add another answer[/url]

what I want is to be able to dynamically add/remove extra input fields to a page without reloading the page. (I can find scripts like these no problem. even ones that allow me to remove a field, but they all remove the last field added) But what I need is a script that allows me to remove a specific field.

i.e. if I wanted to remove field 2 it would leave 1 and 3.

a perfect example of what I'm looking for is implemented in Gmail's add file when you compose a message, you can add extra fields to attach more files, and you can remove any field, (not just the last one added)

sfragis · Post by **sfragis** » Sun Oct 22, 2006 10:00 am

Hi veilig, I guess you're referring to Javascript, don't you?
I did something similar time ago. I don't know if it's W3C compliant.

Code: Select all

<html>
<head>
<script type="text/javascript">
<!--
var counter=3

function remRow(elementId) {
    var element = document.getElementById(elementId)
    if (element) {
        var par=element.parentNode
        par.removeChild(element)
    }
}

function insRow() {
    counter++
    var tr_id = "tr" + counter
    var t=document.getElementById('myTable')
    var r=t.rows.length
    var x=t.insertRow(r)
    x.id = tr_id
    var y=x.insertCell(0)
    var z=x.insertCell(1)
    var w=x.insertCell(2)
    y.innerHTML="Row " + counter + " cell 1"
    z.innerHTML="Row " + counter + " cell 2"
    w.innerHTML="<form><input type=\"button\" onclick=\"remRow('" + tr_id + "')\" value=\"Remove\"></form>"
}
-->
</script>
</head>
<body>
<table id="myTable" border="1">
<tr id="tr1">
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td>
<form>
<input type="button" onclick="remRow('tr1')" value="Remove">
</form>
</td>
</tr>
<tr id="tr2">
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td>
<form>
<input type="button" onclick="remRow('tr2')" value="Remove">
</form>
</td>
</tr>
<tr id="tr3">
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td>
<form>
<input type="button" onclick="remRow('tr3')" value="Remove">
</form>
</td>
</tr>
</table>
<form>
<input type="button" onclick="insRow()" value="Add">
</form>
</body>
</html>