Witam,

napisałem działający dynamiczny formularz na podstawie materiałów z internetu, ale wydaje mi się że można go nieco skrócić a będzie działać tak samo (chodzi mi o kod w pliku formularz.js).

index.html
Kod
<!DOCTYPE html>
<html>
    <head>
        <title>Dynamiczny formularz</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="formularz.js"></script>
        
    </head>
    <body>
        <p>Jakiej muzyki słuchasz?</p>
<a href="#" id="dodaj">Dodaj gatunek</a>
<form name="formularz"></form>
    

        <p>Jakie znasz systemy operacyjne?</p>
<a href="#" id="dodaj1">Dodaj system</a>
<form name="formularz1"></form>


        <p>Imiona Twojego rodzeństwa?</p>
<a href="#" id="dodaj2">Dodaj imię</a>
<form name="formularz2"></form>
    


        <p>Jakie znasz przeglądarki internetowe?</p>
<a href="#" id="dodaj3">Dodaj przeglądarkę</a>
<form name="formularz3"></form>
    
<br>

Co preferujesz (wybierz):
    <input type="text" list="datalist">
        <datalist id="datalist">
        <option value="HTML4">
        <option value="HTML5">
        <option value="XHTML">
        </datalist>


<p>Podaj swój komentarz:</p>
<textarea name="Komentarz" cols="50" rows="7">Proszę, wpisz tutaj jakiś komentarz...</textarea>
<br /><br /><br />

<input type="submit" value="Wyślij formularz" />

<input type="reset" value="Wyczyść dane" />
    
    </body>
</html>


formularz.js
Kod
    $(document).ready(
    function()
    {
        $("#dodaj").click(function()
        {
            var new_label = $("<label>");
            var new_input = $("<input>");
            new_input.attr("type", "text");
            var new_link = $("<a>");
            new_link.attr("href", "#");
            new_link.html("skasuj");
            new_link.click(function()
            {
                $(this).parent("label").remove();
                return false;
            });

            new_label.append(new_input);
            new_label.append(new_link);
            $("form[name=formularz]").append(new_label);
            return false;
        });
                        $("#dodaj1").click(function()
        {
            var new_label = $("<label>");
            var new_input = $("<input>");
            new_input.attr("type", "text");
            var new_link = $("<a>");
            new_link.attr("href", "#");
            new_link.html("skasuj");
            new_link.click(function()
            {
                $(this).parent("label").remove();
                return false;
            });

            new_label.append(new_input);
            new_label.append(new_link);
            $("form[name=formularz1]").append(new_label);
            return false;
        });
                        $("#dodaj2").click(function()
        {
            var new_label = $("<label>");
            var new_input = $("<input>");
            new_input.attr("type", "text");
            var new_link = $("<a>");
            new_link.attr("href", "#");
            new_link.html("skasuj");
            new_link.click(function()
            {
                $(this).parent("label").remove();
                return false;
            });

            new_label.append(new_input);
            new_label.append(new_link);
            $("form[name=formularz2]").append(new_label);
            return false;
        });
                
                        $("#dodaj3").click(function()
        {
            var new_label = $("<label>");
            var new_input = $("<input>");
            new_input.attr("type", "text");
            var new_link = $("<a>");
            new_link.attr("href", "#");
            new_link.html("skasuj");
            new_link.click(function()
            {
                $(this).parent("label").remove();
                return false;
            });

            new_label.append(new_input);
            new_label.append(new_link);
            $("form[name=formularz3]").append(new_label);
            return false;
        });

    });



style.css

Kod
label
{
    display: block;
}
label a
{
    color: #CC0000;
    text-decoration: none;
    margin-left: 5px;
}
label a:hover
{
    text-decoration: underline;
}


PS. Jak zrobić kolorowanie składni w tych kodach wyżej?