如何在动态创建的表格中删除第2个特定的th

Posted 2021-04-13

我正在尝试删除2个特定的按钮，具体取决于我按下哪个删除按钮

这里是相关代码：

<!--html-->
<button type="button" class="collapsible">Gérer les formules</button>
<div class="form-group content">
<br />
    <button type="button" class="ajout-formule"><i class="fas fa-plus-circle"> Ajouter une formule</i></button>
    <div class="panel-body add-formule">
    </div>
</div>

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

    const $formule = $('<div>').addClass('div-formule');

    const $ligne_formule = $('<div>').addClass('ligne-formule');
    const $btn_formule = $('<th>');
    const $tableau_formule = $('<table class="table" id="formule">');
    const $head_formule = $('<thead>');
    const $tr_formule = $('<tr>');



    $btn_formule.append('<button type="button" class="btn spr-champs"><i class="fas fa-trash"></i></button>');
    $btn_formule.append('<button class="btn nbr-champs" type="button"><i class="fas fa-sort-numeric-down"></i></button>');
    $btn_formule.append('<button class="btn list-champs" type="button"><i class="far fa-list-alt"></i></button>');
    $btn_formule.append('<input type="number" name="champs" id="champs" class="form-control pull-left" value="0"/>');

    $tr_formule.append('<th><input type="text" name="titre-formule" id="titre-formule" class="form-control pull-left" /></th>');
    $tr_formule.append('<th style="width:16px;padding-bottom: 16px;"><i class="fas fa-equals"></i></th>');
    $tr_formule.append($btn_formule);

    $head_formule.append($tr_formule);
    $tableau_formule.append($head_formule);

    $ligne_formule.append('<label class="panel-heading">Introduisez la formule : </label>');
    $ligne_formule.append($tableau_formule);

    $formule.append($ligne_formule);
    $formule.append('<button type="button" class="btn ajout-champs"><i class="fas fa-plus-circle"> Ajouter un champ</i></button>');
    $formule.append('<button type="button" class="btn save-formule"><i class="fas fa-check-square"> Enregistrer</i></button>');
    $formule.append('<button type="button" class="btn del-formule"><i class="fas fa-trash"> Supprimer</i></button>')
    $(this).parent().find('.add-formule').append($formule);
});

// add field
$('body').on('click', '.ajout-champs', function(event) {
    const $operateur = $('<select id="operateur">').addClass('ligne-formule operateur').css({"border-radius": "5px","padding-left":"3px","padding-right":"3px","margin-bottom":"5px"}).prop("name","operateur");
    const $btn_formule = $('<th>');
    const $th_operateur = $('<th>');
    var nb_cols = document.getElementById('formule').rows[0].cells.length;

    $operateur.append('<option value="plus">&#xf067;</option>');
    $operateur.append('<option value="moins">&#xf068;</option>');
    $operateur.append('<option value="fois">&#xf00d;</option>');
    $operateur.append('<option value="divise">&#xf529;</option>');

    $btn_formule.append('<button type="button" class="btn spr-champs"><i class="fas fa-trash"></i></button>');
    $btn_formule.append('<button class="btn nbr-champs" type="button"><i class="fas fa-sort-numeric-down"></i></button>');
    $btn_formule.append('<button class="btn list-champs" type="button"><i class="far fa-list-alt"></i></button>');
    $btn_formule.append('<input type="number" name="champs" id="champs" class="form-control pull-left" value="0"/>');

    $th_operateur.append($operateur);

    if (nb_cols == 2)
    {
        $(this).parent().find('.table thead tr').append($btn_formule);
    }
    else
    {
        $(this).parent().find('.table thead tr').append($th_operateur);
        $(this).parent().find('.table thead tr').append($btn_formule);
    }
});
// del field
$('body').on('click', '.spr-champs', function(event) {
    var ndx = $(this).parent().index() + 1;

    $('th', event.delegateTarget).remove(':nth-child(' + ndx + ')');

});

这确实按预期工作，这不是我想要的

这是这里的工作：

• 每次我按下字段上方的“删除”按钮，它只会删除整个字段

这是我想要的：

• 根据我按下哪个删除按钮，删除该特定按钮，还要删除其旁边的“操作员”按钮

这里是我想要的屏幕：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9zMUZXOC5wbmcifQ==” alt =“显示我想要的屏幕”>

这里是如何使用代码段的屏幕：

// collapsible
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
}

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

    const $formule = $('<div>').addClass('div-formule');

    const $ligne_formule = $('<div>').addClass('ligne-formule');
    const $btn_formule = $('<th>');
    const $tableau_formule = $('<table class="table" id="formule">');
    const $head_formule = $('<thead>');
    const $tr_formule = $('<tr>');



    $btn_formule.append('<button type="button" class="btn spr-champs"><i class="fas fa-trash"></i></button>');
    $btn_formule.append('<button class="btn nbr-champs" type="button"><i class="fas fa-sort-numeric-down"></i></button>');
    $btn_formule.append('<button class="btn list-champs" type="button"><i class="far fa-list-alt"></i></button>');
    $btn_formule.append('<input type="number" name="champs" id="champs" class="form-control pull-left" value="0"/>');

    $tr_formule.append('<th><input type="text" name="titre-formule" id="titre-formule" class="form-control pull-left" /></th>');
    $tr_formule.append('<th style="width:16px;padding-bottom: 16px;"><i class="fas fa-equals"></i></th>');
    $tr_formule.append($btn_formule);

    $head_formule.append($tr_formule);
    $tableau_formule.append($head_formule);

    $ligne_formule.append('<label class="panel-heading">Introduisez la formule : </label>');
    $ligne_formule.append($tableau_formule);

    $formule.append($ligne_formule);
    $formule.append('<button type="button" class="btn ajout-champs"><i class="fas fa-plus-circle"> Ajouter un champ</i></button>');
    $formule.append('<button type="button" class="btn save-formule"><i class="fas fa-check-square"> Enregistrer</i></button>');
    $formule.append('<button type="button" class="btn del-formule"><i class="fas fa-trash"> Supprimer</i></button>')
    $(this).parent().find('.add-formule').append($formule);
});

// add field
$('body').on('click', '.ajout-champs', function(event) {
    const $operateur = $('<select id="operateur">').addClass('ligne-formule operateur').css({"border-radius": "5px","padding-left":"3px","padding-right":"3px","margin-bottom":"5px"}).prop("name","operateur");
    const $btn_formule = $('<th>');
    const $th_operateur = $('<th>');
    var nb_cols = document.getElementById('formule').rows[0].cells.length;

    $operateur.append('<option value="plus">&#xf067;</option>');
    $operateur.append('<option value="moins">&#xf068;</option>');
    $operateur.append('<option value="fois">&#xf00d;</option>');
    $operateur.append('<option value="divise">&#xf529;</option>');

    $btn_formule.append('<button type="button" class="btn spr-champs"><i class="fas fa-trash"></i></button>');
    $btn_formule.append('<button class="btn nbr-champs" type="button"><i class="fas fa-sort-numeric-down"></i></button>');
    $btn_formule.append('<button class="btn list-champs" type="button"><i class="far fa-list-alt"></i></button>');
    $btn_formule.append('<input type="number" name="champs" id="champs" class="form-control pull-left" value="0"/>');

    $th_operateur.append($operateur);

    if (nb_cols == 2)
    {
        $(this).parent().find('.table thead tr').append($btn_formule);
    }
    else
    {
        $(this).parent().find('.table thead tr').append($th_operateur);
        $(this).parent().find('.table thead tr').append($btn_formule);
    }
});

// del field
$('body').on('click', '.spr-champs', function(event) {
    var ndx = $(this).parent().index() + 1;

    $('th', event.delegateTarget).remove(':nth-child(' + ndx + ')');

});

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

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

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

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

.header a.logo, .panel-body button.collapsible {
    font-size: 25px;
    font-weight: bold;
}

.header a:hover, .panel-body button.collapsible: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, .panel-body button.collapsible {
        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,.ajout-formule,.save-formule,.ajout-champs, .del-formule {
    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,.ajout-formule,.save-formule,.ajout-champs, .del-formule {
    background-color: RoyalBlue;
}

.graph, .formule {
    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, .add-formule {
    background-color: #fff;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

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

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

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

.collapsible {
    width: 100%;
    background-color: #eee;
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}

.collapsible:after {
    content: '2795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.collapsible.active:after {
    content: "2796"; /* Unicode character for "minus" sign (-) */
}

#previous_btn_personal_details, #btn_personal_details, .ajout-champs, .save-formule, .del-formule{
    margin-top : 2.5%;
}

.save-formule, .del-formule{
    margin-left:1%;
    float:right;
}

.operateur {
    font-family: FontAwesome, sans-serif;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.operateur::-ms-expand{
    display:none;
}

.add-formule, .div-formule{
    background-color: #f1f1f1;
}

.div-formule{
    margin-bottom: 2%;
}

<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-sort-alpha-down"></i></button>
                                                <button class="btn nbr-col" type="button"><i class="fas fa-sort-numeric-down"></i></button>
                                                <button class="btn list-col" type="button"><i class="far fa-list-alt"></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>
                            <button type="button" class="collapsible">Gérer les formules</button>
                            <div class="form-group content">
                                <br />
                                <button type="button" class="ajout-formule"><i class="fas fa-plus-circle"> Ajouter une formule</i></button>
                                <div class="panel-body add-formule">
                                </div>
                            </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>
            </div>
        </form>
    </div>
</div>

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

<script src="jss/ajout.js"></script>
<script src="jss/gengrille.js"></script>
<script src="jss/gengraph.js"></script>
<script src="jss/genformule.js"></script>
</body>
</html>

答案

您要使用jQuery变量$（this）选择单击的按钮。使用parent（）遍历DOM。使用next（）获取从DOM中的该点开始的下一个元素。

我做了一个简单的例子来说明我的意思：

$('button').on('click', function(){
  // Shows the button that was clicked on
  console.log($(this));
  
  // Use parent to capture whole div
  var wrapper = $(this).parent();
  
  // Delete everything in wrapper
  wrapper.empty();
  
  // Delete first span after wrapper
  wrapper.next('span').remove()
  
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <button id="1">Test</button>
  <p> Things that get deleted on button 1</p>
</div>
<span> Item after 1</span>
<div id="wrapper">
  <button id="2">Test</button>
  <p> Things that get deleted on button 2</p>
</div>
<span> Item after 2</span>

以上是关于如何在动态创建的表格中删除第2个特定的th的主要内容，如果未能解决你的问题，请参考以下文章

thymeleaf中的th:remove用法

我们如何使用javascript根据表格中的第一行元素动态添加行？

用js实现动态添加表格数据

从ViewPager android替换片段

如何从表格中删除多余的空白行？

CSS：如何定位表格中的特定单元格？