Select 使用 jquery 删除某些 html 代码

Question

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

示例输出：如果我添加 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>

Answer 1

添加后，使用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>

Answer 2

添加行时，可以将对应的<h1>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>

Select 使用 jquery 删除某些 html 代码

Select certain html code to remove using jquery

javascript

html

jquery

jquery-ui