Select certain html code to remove using jquery-CodePudding

I have a mechanism that is as follows: If the add button is clicked it will add a new input row and if the remove button is clicked it will delete that specific input row (see snippet). The problem I am facing is when I click a certain remove button I want the corresponding text row to be deleted. How would I be able to achieve this?

Example output: If I add 4 rows and remove the second row, the text should be

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>

CodePudding user response：

When adding the row, you can save the corresponding <h1> jQuery object into the .data of the added row. Then, when removing the top row, just go into the data to find the associated row on the bottom.

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>

I'd also highly recommend not constructing invalid HTML - there should be no more than a single element with a particular ID in a document. You can also use template literals to make the upper row much cleaner.

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>

CodePudding user response：

After appending, get the last child using last(), find the delete button and add a click event listener that deletes the group.

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>