使用 jquery 选择要删除的某些 html 代码

Posted

技术标签:

【中文标题】使用 jquery 选择要删除的某些 html 代码【英文标题】：Select certain html code to remove using jquery 【发布时间】：2021-09-13 03:45:06 【问题描述】：

我有一个机制如下：如果单击添加按钮，它将添加一个新的输入行，如果单击删除按钮，它将删除该特定输入行（参见 sn-p）。我面临的问题是当我单击某个删除按钮时，我希望删除相应的文本行。我怎样才能做到这一点？

示例输出：如果我添加 4 行并删除第二行，则文本应为

I am row 1
I am row 3
I am row 4


let count = 2;
$("#addRow").click(function () 
    var html = '';
    html += '<div id="inputFormRow">';
    html += '<div class="input-group mb-3">';
    html += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
    html += '<div class="input-group-append">';
    html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
    html += '</div>';
    html += '</div>';
    $('#newRow').append(html);

    let html2 = `<h1> I am Row ` + count + `</h1>`;
    $('#face-two').append(html2);
    count++;
);

// remove row
$(document).on('click', '#removeRow', function () 
    $(this).closest('#inputFormRow').remove();
);

// remove text 
$(document).on('click', '#removeRow', function () 
    $(this).closest('h1').remove();
);
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body>
    <form method="post" action="">
        <div class="row">
            <div class="col-lg-12">
                <div id="inputFormRow">
                    <div class="input-group mb-3">
                        <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title"
                            autocomplete="off">
                        <div class="input-group-append">
                            <button id="removeRow" type="button" class="btn btn-danger">Remove</button>
                        </div>
                    </div>
                </div>
                <div id="newRow"></div>
                <button id="addRow" type="button" class="btn btn-info">Add Row</button>
            </div>
        </div>
    </form>


    <br><br>
    <div id="face-two">
        <hr>
        <h1> I am Row 1</h1>
    </div>

</body>
</html>

【问题讨论】：

【参考方案1】：

添加行时，可以将对应的&lt;h1&gt;jQuery对象保存到添加行的.data中。然后，在删除最上面一行的时候，只需进入数据中找到底部的关联行即可。

let count = 2;
$("#addRow").click(function () 
    var html = '';
    html += '<div id="inputFormRow">';
    html += '<div class="input-group mb-3">';
    html += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
    html += '<div class="input-group-append">';
    html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
    html += '</div>';
    html += '</div>';
    const rowTop = $(html);
    $('#newRow').append(rowTop);

    const rowBot = $(`<h1> I am Row ` + count + `</h1>`);
    $('#face-two').append(rowBot);
    rowTop.data('rowBot', rowBot);
    count++;
);

// remove row
$(document).on('click', '#removeRow', function () 
    const rowTop = $(this).closest('#inputFormRow');
    rowTop.data('rowBot').remove();
    rowTop.remove();
);
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body>
    <form method="post" action="">
        <div class="row">
            <div class="col-lg-12">
                <div id="inputFormRow">
                    <div class="input-group mb-3">
                        <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title"
                            autocomplete="off">
                        <div class="input-group-append">
                            <button id="removeRow" type="button" class="btn btn-danger">Remove</button>
                        </div>
                    </div>
                </div>
                <div id="newRow"></div>
                <button id="addRow" type="button" class="btn btn-info">Add Row</button>
            </div>
        </div>
    </form>


    <br><br>
    <div id="face-two">
        <hr>
        <h1> I am Row 1</h1>
    </div>

</body>
</html>

我还强烈建议不要构造无效的 HTML - 文档中不应有超过一个具有特定 ID 的元素。您还可以使用模板文字使上面的行更干净。

let count = 2;
$("#addRow").click(() => 
    const html = `
    <div class="inputFormRow">
        <div class="input-group mb-3">
        <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">
        <div class="input-group-append">
            <button class="removeRow" type="button" class="btn btn-danger">Remove</button>
        </div>
    </div>
    `;
    const rowTop = $(html);
    $('#newRow').append(rowTop);

    const rowBot = $(`<h1> I am Row $count</h1>`);
    $('#face-two').append(rowBot);
    rowTop.data('rowBot', rowBot);
    count++;
);

// remove row
$(document).on('click', '.removeRow', function () 
    const rowTop = $(this).closest('.inputFormRow');
    rowTop.data('rowBot').remove();
    rowTop.remove();
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <form method="post" action="">
        <div class="row">
            <div class="col-lg-12">
                <div id="inputFormRow">
                    <div class="input-group mb-3">
                        <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title"
                            autocomplete="off">
                        <div class="input-group-append">
                            <button id="removeRow" type="button" class="btn btn-danger">Remove</button>
                        </div>
                    </div>
                </div>
                <div id="newRow"></div>
                <button id="addRow" type="button" class="btn btn-info">Add Row</button>
            </div>
        </div>
    </form>


    <br><br>
    <div id="face-two">
        <hr>
        <h1> I am Row 1</h1>
    </div>

【讨论】：

【参考方案2】：

追加后，使用last()获取最后一个孩子，找到删除按钮，添加删除组的点击事件监听。

let count = 2;
$("#addRow").click(function () 
    var html = '';
    html += '<div id="inputFormRow">';
    html += '<div class="input-group mb-3">';
    html += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
    html += '<div class="input-group-append">';
    html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
    html += '</div>';
    html += '</div>';
    $('#newRow').append(html).last().find('button').on('click', function()
  $(this).closest('#inputFormRow').remove();
);

    let html2 = `<h1> I am Row ` + count + `</h1>`;
    $('#face-two').append(html2);
    count++;
);

// remove row
$(document).on('click', '#removeRow', function () 
    $(this).closest('#inputFormRow').remove();
);

// remove text 
$(document).on('click', '#removeRow', function () 
    $(this).closest('h1').remove();
);
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body>
    <form method="post" action="">
        <div class="row">
            <div class="col-lg-12">
                <div id="inputFormRow">
                    <div class="input-group mb-3">
                        <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title"
                            autocomplete="off">
                        <div class="input-group-append">
                            <button id="removeRow" type="button" class="btn btn-danger">Remove</button>
                        </div>
                    </div>
                </div>
                <div id="newRow"></div>
                <button id="addRow" type="button" class="btn btn-info">Add Row</button>
            </div>
        </div>
    </form>


    <br><br>
    <div id="face-two">
        <hr>
        <h1> I am Row 1</h1>
    </div>

</body>
</html>

【讨论】：

以上是关于使用 jquery 选择要删除的某些 html 代码的主要内容，如果未能解决你的问题，请参考以下文章

使用jQuery从列表中选择具有某些属性的div

如何从 jQuery Chosen 选择下拉菜单中隐藏或删除选项

删除某些屏幕尺寸的元素

如何使用 jquery 选择某些文本节点？

转android出现注: 某些输入文件使用或覆盖了已过时的 API。 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。 注: 某些输入文件使用了未经检查或不安全的操作(代

怎么用jQuery实现点击按钮后删除某个元素？