每次按下特定按钮时如何创建和删除表单？答案

【问题标题】：How to create and delete a form each time I press a specific button?每次按下特定按钮时如何创建和删除表单？
【发布时间】：2020-02-28 08:54:39
【问题描述】：

我试图在每次按下按钮时创建一个表单

这里是相关代码：

// add graph
$('body').on('click', '.ajout-graph', function() {

    var col_tab = document.getElementById('grille').rows[0].cells;
    var nb_cols = document.getElementById('grille').rows[0].cells.length;
    var titre_col='';

    $(this).parent().find('.add').append('<div class="div-graph">');
    $(this).parent().find('.div-graph').append('<br/><label>Titre du graphique : </label>');
    $(this).parent().find('.div-graph').append('<input type="text" name="titre-graph" id="titre-graph" class="graph" />');
    $(this).parent().find('.div-graph').append('<label>Choix du type de graphique : </label>');
    $(this).parent().find('.div-graph').append('');
    $(this).parent().find('.div-graph').append('<br/>');
    $(this).parent().find('.div-graph').append('<label>Axe X : </label>');

    $(this).parent().find('.div-graph').append('<select name="axe_x" class="graph axe-x">');
    for (var num_col=1; num_col<nb_cols; num_col++)
    {
        titre_col=col_tab[num_col].children[3].value;
        $(this).parent().find('.axe-x').append('<option value = "' + num_col.toString() + '">' + titre_col.trim() + '</option>');
    }

    $(this).parent().find('.div-graph').append('<label>Axe Y : </label>');

    $(this).parent().find('.div-graph').append('<select name="axe_y" class="graph axe-y">');
    for (var num_col=1; num_col<nb_cols; num_col++)
    {
        titre_col=col_tab[num_col].children[3].value;
        $(this).parent().find('.axe-y').append('<option value = "' + num_col.toString() + '">' + titre_col.trim() + '</option>');
    }
    $(this).parent().find('.div-graph').append('<br/>');
    $(this).parent().find('.div-graph').append('<label>Graduation X : </label>');
    $(this).parent().find('.div-graph').append('<input type="number" name="grad-x-graph" id="grad-x-graph" class="graph grad" />');
    $(this).parent().find('.div-graph').append('<label>Graduation Y : </label>');
    $(this).parent().find('.div-graph').append('<input type="number" name="grad-y-graph" id="grad-y-graph" class="graph grad" />');
    $(this).parent().find('.div-graph').append('<br/><div align="center">');
    $(this).parent().find('.div-graph').append('<button type="button" name="previsualisation-graph" id="previsualisation-graph" class="btn btn-default btn-lg previ_graph">Prévisualisation</button>\n' +
        '                                <button type="button" name="supprimer-graph" id="supprimer-graph" class="btn btn-info btn-lg spr_graph">Supprimer</button>\n');
    $(this).parent().find('.div-graph').append('</div><br/>');
});

// delete graph
$('body').on('click', '.spr_graph', function(event) {
    var this_graph = $(this).parent().index() + 1;

    $('.div-graph', event.delegateTarget).remove(':nth-child(' + this_graph + ')');
});

                    <div class="panel panel-default">
                        <div class="panel-heading">Génération des graphiques</div>
                        <div class="panel-body">
                            <div class="form-group">
                                <button class="ajout-graph" type="button"><div align="center"><i class="fas fa-plus-circle"> Ajouter un graphique</i></div></button>
                                <div class="panel-body add">
                                </div>
                            </div>
                        </div>

这是有意为之的......这不是我想要的

这是做什么的：

每次我按下“Ajouter un graphique”（意味着添加一个新图形）时，它都会在 div-graph 类中添加一个新表单...这意味着每次按下该按钮时它都会复制该表单，因为我附加的表单具有 div-graph 类，因此它将表单附加到每个 div-graph 类

这就是我想要的：

每次我按“Ajouter un graphique”时，都会添加 1 个新的单独表单
每次我按“Supprimer”（表示删除）时，删除该特定表单

要进入我的 sn-p 的最后一个选项卡，只需创建 2 列并给它们标题

像这样：Screenshot of how to access the final page

提前感谢您的帮助！

// add graph
$('body').on('click', '.ajout-graph', function() {

    var col_tab = document.getElementById('grille').rows[0].cells;
    var nb_cols = document.getElementById('grille').rows[0].cells.length;
    var titre_col='';

    $(this).parent().find('.add').append('<div class="div-graph">');
    $(this).parent().find('.div-graph').append('<br/><label>Titre du graphique : </label>');
    $(this).parent().find('.div-graph').append('<input type="text" name="titre-graph" id="titre-graph" class="graph" />');
    $(this).parent().find('.div-graph').append('<label>Choix du type de graphique : </label>');
    $(this).parent().find('.div-graph').append('');
    $(this).parent().find('.div-graph').append('<br/>');
    $(this).parent().find('.div-graph').append('<label>Axe X : </label>');

    $(this).parent().find('.div-graph').append('<select name="axe_x" class="graph axe-x">');
    for (var num_col=1; num_col<nb_cols; num_col++)
    {
        titre_col=col_tab[num_col].children[3].value;
        $(this).parent().find('.axe-x').append('<option value = "' + num_col.toString() + '">' + titre_col.trim() + '</option>');
    }

    $(this).parent().find('.div-graph').append('<label>Axe Y : </label>');

    $(this).parent().find('.div-graph').append('<select name="axe_y" class="graph axe-y">');
    for (var num_col=1; num_col<nb_cols; num_col++)
    {
        titre_col=col_tab[num_col].children[3].value;
        $(this).parent().find('.axe-y').append('<option value = "' + num_col.toString() + '">' + titre_col.trim() + '</option>');
    }
    $(this).parent().find('.div-graph').append('<br/>');
    $(this).parent().find('.div-graph').append('<label>Graduation X : </label>');
    $(this).parent().find('.div-graph').append('<input type="number" name="grad-x-graph" id="grad-x-graph" class="graph grad" />');
    $(this).parent().find('.div-graph').append('<label>Graduation Y : </label>');
    $(this).parent().find('.div-graph').append('<input type="number" name="grad-y-graph" id="grad-y-graph" class="graph grad" />');
    $(this).parent().find('.div-graph').append('<br/><div align="center">');
    $(this).parent().find('.div-graph').append('<button type="button" name="previsualisation-graph" id="previsualisation-graph" class="btn btn-default btn-lg previ_graph">Prévisualisation</button>\n' +
        '                                <button type="button" name="supprimer-graph" id="supprimer-graph" class="btn btn-info btn-lg spr_graph">Supprimer</button>\n');
    $(this).parent().find('.div-graph').append('</div><br/>');
});

// delete graph
$('body').on('click', '.spr_graph', function(event) {
    var this_graph = $(this).parent().index() + 1;

    $('.div-graph', event.delegateTarget).remove(':nth-child(' + this_graph + ')');
});

// Code goes here

$(document).ready(function() {
    // add row
    $('body').on('click', '.ajout-lig', function() {

        var tr = $(this).parents('.table-content').find('.table tbody tr:last');
        if (tr.length > 0) {
            var clone = tr.clone();
            clone.find(':text').val('');
            //clone.find(':number').val('');
            tr.after(clone);

        } else {
            var cols = $(this).closest('.table-content').find('th').length,tr0 = $('<tr/>');
            tr0.html('<td><button class="btn remove-row" type="button"><i class="fas fa-trash"></i></button></td><td> <input type="text" class="form-control"> </td>');
            for (var i = 2; i < cols; i++) {
                tr0.append('<td> <input type="text" class="form-control"> </td>')
            }
            $(this).closest('.table-content').find('.table tbody').append(tr0);
        }
    });

    // delete row
    $('body').on('click', '.remove-row', function() {

        $(this).parents('tr').remove();

    });

    // add column
    $('body').on('click', '.ajout-col', function() {

        $(this).parent().find('.table thead tr').append('<th><button class="btn remove-col" type="button"><i class="fas fa-trash"></i></button> <button class="btn text-col" type="button"><i class="fas fa-text-height"></i></button> <button class="btn nbr-col" type="button"><i class="fas fa-sort-numeric-down"></i></button> <input type="text" class="form-control pull-left" value=""></th>');
        $(this).parent().find('.table tbody tr').append('<td><input type="text" class="form-control"></td>');

    });

    // change column type to text
    $('body').on('click', '.text-col', function(event) {

        let ndx = $(this).parent().index() + 1;
        let inputsCol = $('.table tbody tr td:nth-child(' + ndx + ') input');
        inputsCol.attr("type", "text");

    });

    // change column type to number
    $('body').on('click', '.nbr-col', function(event) {

        var filter = /^[0-9]*$/g;
        var cond = false;
        var min = prompt('Valeur minimum :');
        while (cond == false) {
            if (min.match(filter)) {
                cond = true;
            } else {
                var min = prompt('Valeur minimum incorrect, réessayez :');
            }
        }

        var cond = false;
        var max = prompt('Valeur maximum :');
        while (cond == false) {
            if (max.match(filter)) {
                cond = true;
            } else {
                var max = prompt('Valeur maximum incorrect, réessayez :');
            }
        }


        let ndx = $(this).parent().index() + 1;
        let inputsCol = $('.table tbody tr td:nth-child(' + ndx + ') input');
        inputsCol.attr("type", "number").prop("min", min).prop("max", max);
        //console.log("inputs modified, example:", inputsCol2[0])

    });


    // remove column
    $('body').on('click', '.remove-col', function(event) {

        // Get index of parent TD among its siblings (add one for nth-child)
        var ndx = $(this).parent().index() + 1;
        // Find all TD elements with the same index
        $('th', event.delegateTarget).remove(':nth-child(' + ndx + ')');
        $('td', event.delegateTarget).remove(':nth-child(' + ndx + ')');
    });
});

$(document).ready(function(){

    $('#btn_personal_details').click(function(){
        var error_grille = '';
        var error_nom_grille = '';
        var col_tab = document.getElementById('grille').rows[0].cells;
        var current_col;
        var champ_vide=0;

        var nb_cols = document.getElementById('grille').rows[0].cells.length;
        if (nb_cols<=2)
        {
            error_grille = 'Au moins deux colonnes requise !';
            $('#error_grille').text(error_grille);
        }
        else
        {
            error_grille = '';
            $('#error_grille').text(error_grille);
        }

        for (var num_col=1; num_col<nb_cols; num_col++)
        {
            current_col=col_tab[num_col].children[3];

            if (current_col.value == '' || current_col.value == null)
            {
                champ_vide=1;
            }
        }

        if (champ_vide==1)
        {
            error_nom_grille = 'Entrez un titre à vos colonnes !';
            $('#error_nom_grille').text(error_nom_grille);
        }
        else
        {
            error_nom_grille = '';
            $('#error_nom_grille').text(error_nom_grille);
        }

        if (error_grille != '' || error_nom_grille != '')
        {
            return false;
        }
        else
        {
            $('#list_personal_details').removeClass('active active_tab1');
            $('#list_personal_details').removeAttr('href data-toggle');
            $('#personal_details').removeClass('active');
            $('#list_personal_details').addClass('inactive_tab1');
            $('#list_contact_details').removeClass('inactive_tab1');
            $('#list_contact_details').addClass('active_tab1 active');
            $('#list_contact_details').attr('href', '#contact_details');
            $('#list_contact_details').attr('data-toggle', 'tab');
            $('#contact_details').addClass('active in');
        }
    });

    $('#previous_btn_contact_details').click(function(){
        $('#list_contact_details').removeClass('active active_tab1');
        $('#list_contact_details').removeAttr('href data-toggle');
        $('#contact_details').removeClass('active in');
        $('#list_contact_details').addClass('inactive_tab1');
        $('#list_personal_details').removeClass('inactive_tab1');
        $('#list_personal_details').addClass('active_tab1 active');
        $('#list_personal_details').attr('href', '#personal_details');
        $('#list_personal_details').attr('data-toggle', 'tab');
        $('#personal_details').addClass('active in');
    });

});

/* Style the header with a grey background and some padding */
* {box-sizing: border-box;}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
}

.header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}

.header a.logo {
    font-size: 25px;
    font-weight: bold;
}

.header a:hover {
    background-color: #ddd;
    color: black;
}

.header a.active {
    background-color: dodgerblue;
    color: white;
}

.header-right {
    float: right;
}

@media screen and (max-width: 500px) {
    .header a {
        float: none;
        display: block;
        text-align: left;
    }

    .header-right {
        float: none;
    }
}

.contenuaccueil {
    text-align: center;
    position : absolute;
    width : 100%;
    color : black;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.background
{
    margin-top : 10%;
    margin-bottom : 10%;
    position:relative;
    text-align: center;
}

.img
{
    background-repeat: repeat-x;
    width: 100%;
    height: auto;
    text-align: center;
}

footer {
    text-align : center;
    padding-top: 10px;
    padding-bottom: 0px;
    bottom:0;
    width:100%;
    color					: #A5A5A5;
    font-family				: "Lato", sans-serif;
    font-size				: 15px;
    font-weight				: 400;
    text-transform			: uppercase;
    text-decoration			: none;
    letter-spacing			: 3px;
}

.box
{
    width:800px;
    margin:0 auto;
}
.active_tab1
{
    background-color:#fff;
    color:#333;
    font-weight: 600;
}
.inactive_tab1
{
    background-color: #f5f5f5;
    color: #333;
    cursor: not-allowed;
}
.has-error
{
    border-color:#cc0000;
    background-color:#ffff99;
}

/* Styles go here */

.table-content {
    padding: 20px;
}

.form-control {
    width: 90px;
}

/* Style buttons */
.ajout-lig,.ajout-col,.ajout-graph {
    background-color: DodgerBlue; /* Blue background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 12px 16px; /* Some padding */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
    border-radius: 5px;
    margin-bottom: 1%;
}

/* Darker background on mouse-over */
.ajout-lig:hover,.ajout-col:hover,.ajout-graph {
    background-color: RoyalBlue;
}

.graph {
    display: block;
    margin : 0.75%;
    width: 50%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.add {
    background-color: #fff;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.div-graph {
    padding: 15px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.grad, .axe-x, .axe-y {
    width: 25%;
    display : initial;
}

.grad {
    width: 10%;
    margin-bottom: 5%;
}

<html>
<head>
    <title>Innovatech</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/custom.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://kit.fontawesome.com/38b99a3f0e.js" crossorigin="anonymous"></script>
</head>

<body>
<!-- Titre + Menu -->
<div class="header">
    <a href="index.php" class="logo">Innovatech</a>
    <div class="header-right">
        <a href="index.php">Accueil</a>
        <a class="active" href="ajout.php">Création</a>
        <a href="modif.php">Nouveau</a>
        <a href="help.php">Mode d'emploi</a>
    </div>
</div>

<!-- Contenu du site web -->
<div class="contenu">
    <br />
    <div class="container box">
        <br />
        <h2 align="center">Création d'un nouvel audit</h2><br />
        <?php echo $message; ?>
        <form method="post" id="register_form">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active_tab1" style="border:1px solid #ccc" id="list_login_details">Informations à propos de l'entreprise</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link inactive_tab1" id="list_personal_details" style="border:1px solid #ccc">Grille d'audit</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link inactive_tab1" id="list_contact_details" style="border:1px solid #ccc">Génération des graphiques</a>
                </li>
            </ul>
            <div class="tab-content" style="margin-top:16px;">
                <div class="tab-pane active" id="personal_details">
                    <div class="panel panel-default">
                        <div class="panel-heading">Grille d'audit</div>
                        <div class="panel-body">
                            <div class="table-content">

                                <button class="ajout-col" type="button" id="ajout-col"><i class="fas fa-columns"> Ajouter une colonne</i></button>
                                <br />
                                <div class="table-responsive">
                                    <table class="table" id="grille">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>
                                                <button class="btn remove-col" type="button"><i class="fas fa-trash"></i></button>
                                                <button class="btn text-col" type="button"><i class="fas fa-text-height"></i></button>
                                                <button class="btn nbr-col" type="button"><i class="fas fa-sort-numeric-down"></i></button>
                                                <input type="text" class="form-control pull-left">
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>
                                                <button class="btn remove-row" type="button"><i class="fas fa-trash"></i></button>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control">
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <button class="ajout-lig" type="button"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
                            </div>
                            <div class="form-group" align="center">
                                <span id="error_grille" class="text-danger"></span>
                                <span id="error_nom_grille" class="text-danger"></span>
                            </div>
                            <br />
                            <div align="center">
                                <button type="button" name="previous_btn_personal_details" id="previous_btn_personal_details" class="btn btn-default btn-lg">Précédent</button>
                                <button type="button" name="btn_personal_details" id="btn_personal_details" class="btn btn-info btn-lg">Suivant</button>
                            </div>
                            <br />
                        </div>
                    </div>
                </div>

                <!--A MODIFIER - PARTIE SUR LES GRAPHIQUES-->
                <div class="tab-pane fade" id="contact_details">
                    <div class="panel panel-default">
                        <div class="panel-heading">Génération des graphiques</div>
                        <div class="panel-body">
                            <div class="form-group">
                                <button class="ajout-graph" type="button"><div align="center"><i class="fas fa-plus-circle"> Ajouter un graphique</i></div></button>
                                <div class="panel-body add">
                                </div>
                            </div>
                            <br />
                            <div align="center">
                                <button type="button" name="previous_btn_contact_details" id="previous_btn_contact_details" class="btn btn-default btn-lg">Précédent</button>
                                <button type="button" name="btn_contact_details" id="btn_contact_details" class="btn btn-success btn-lg">Enregistrer</button>
                            </div>
                            <br />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Le pied de page -->
<footer>
    <p>
        Innovatech <?php echo date("Y");?> - All rights reserved
    </p>
</footer>

</body>
</html>

【问题讨论】：

一个建议，避免混合纯 javascript 和 jquery，它可能会在您的对象中产生不一致，而且，我不明白按钮 Supprimer 是否放置在 DOM 中
请创建minimal reproducible example，强调minimal ;)
感谢您的建议！ “Supprimer”按钮与表单一起创建，每个创建的表单都有一些输入文本字段、数字字段等......以及 2 个按钮“预览”和“删除”。我的目标是能够从创建的按钮中删除该特定表单，并从该特定的“预览”按钮预览图形（这不是我当前问题的一部分，所以不要介意）
我刚刚编辑了我的代码，很抱歉给您带来不便@ChrisG！问题是，我的代码从另一个选项卡获取一些值，如果我将所有选项卡都放在我的示例中，它不会是一个最小的可复制示例：p，检查我的 sn-p 以获取（几乎）完整代码:)跨度>
如果你愿意，我可以尝试添加一些截图来说明发生了什么:)

标签： javascript jquery html css forms

【解决方案1】：

$(".ajout-graph").click(function(){
   $(".add").append('<div class="div-graph"><br/><label>Titre du graphique : </label><input type="text" name="titre-graph" id="titre-graph" class="graph" /><label>Choix du type de graphique : </label><br/><label>Axe X : </label><select name="axe_x" class="graph axe-x"><option value = "check">Check</option></select><label>Axe Y : </label><select name="axe_y" class="graph axe-y"><option value = "check2">Check 2</option></select><br/><label>Graduation X : </label><input type="number" name="grad-x-graph" id="grad-x-graph" class="graph grad" /><label>Graduation Y : </label><input type="number" name="grad-y-graph" id="grad-y-graph" class="graph grad" /><br/><div align="center"><button type="button" name="previsualisation-graph" id="previsualisation-graph" class="btn btn-default btn-lg previ_graph">Prévisualisation</button><button type="button" name="supprimer-graph" id="supprimer-graph" class="btn btn-info btn-lg spr_graph">Supprimer</button></div></div>');
 });

$('body').on('click', '.spr_graph', function() {
  $(this).closest(".div-graph").remove();
});

<div class="panel panel-default">
<div class="panel-heading">Génération des graphiques</div>
<div class="panel-body">
<div class="form-group">
<button class="ajout-graph" type="button"><div align="center"><i class="fas fa-plus-circle"> Ajouter un graphique</i></div></button>
<div class="panel-body add">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：