asked on

Jquery adding and removing rows

Hi -

I am trying to add and remove rows with jquery. Using the code below:

The row adds ok but when I click "Remove" nothing happens (row is not removed) ...

If I change:
$(id).remove();
to alert(id)

I get a popup...

function(event, queueID, fileObj, response, data) {
            var id = queueID
            $("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
            }

function removeFormField(id) {
        $(id).remove();
    }


<div id="filesUploaded"></div>

Open in new window

leakim971

Hello doctor069,

The following code work for me :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
	$(document).ready(function(){
		id = "1";
		$("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
		id = "2";
		$("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
	});
	function removeFormField(id) {
        $(id).remove();
    }
</script>
</head>
<body >
<div id="filesUploaded"></div>
</body>
</html>

Open in new window

doctor069

ASKER

hmm...

the only difference I see is the you are adding the row from a "load" and I am adding from a "click" ?

leakim971

Could you post your code ?

doctor069

ASKER

The full code is as follows:

I am using uploadify to upload images. At the end (onComplete:) it runs the function. The row adds successfully but when I click "Remove" it does nothing.

If I use function removeFormField(id) {
alert(id)
}

I do get a popup with the proper id

Thanks for helping

 function InitUploadForProductImages() {
        $('#fileInput').uploadify({
            'uploader': '<%= ResolveURL("~/uploadify.swf")%>',
            'script': '<%= ResolveURL("~ProductPhotoUpload.ashx")%>',
            'cancelImg': '<%= ResolveClientURL("~//images/cancel.png")%>',
            'auto': true,
            'folder': '/<%=FolderName %>',
            'buttonText': 'Upload Files',
            'multi': 'true',
            'buttonImg': '/images/btnUploadImages.png',
            'width': '155',
            'height': '28',
            onSelect: function() {
                globalFileUploaded = true;
            },
            onComplete: function(event, queueID, fileObj, response, data) {
            var id = queueID
            $("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
           }
        });
    }

    function removeFormField(id) {
        $(id).remove();
    }

Open in new window

doctor069

ASKER

Even tried the code below. Add fine but will not remove. My guess is that it is a id issue. Just not sure how to troubleshoot

  function test() {
        var id = 1
        $("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
    }

    function removeFormField(id) {
        alert(id)
        $(id).remove();
        alert('done')
    }


<input id="Button1" type="button" value="button" onclick="test();" />

Open in new window

leakim971

Try the following and you found your issue :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
  function test() {
        var id = 1
        $("#filesUploaded").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
    }

    function removeFormField(id) {
        alert(id)
        $(id).remove();
        alert('done')
    }
</script>
</head>
<body >
<div id="filesUploaded"><input id="Button1" type="button" value="button" onclick="test();" /></div>
</body>
</html>

Open in new window

doctor069

ASKER

More comments -

Just tried it in firefox and everything works with no issues. Seems to be a IE 8 issue.
Any sugestions would be appreciated

ASKER CERTIFIED SOLUTION

doctor069

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial