使用jquery選擇某些html代碼進行洗掉 -有解無憂

我有一個機制，其內容如下。如果添加按鈕被點擊，它將添加一個新的輸入行，如果洗掉按鈕被點擊，它將洗掉該特定的輸入行（見片段）。我所面臨的問題是，當我點擊某個洗掉按鈕時，我想洗掉相應的文本行。我怎樣才能實作這個目標呢？

示例輸出。如果我添加4行并洗掉第二行，文本應該是

。

I是行1。
I am row 3
Iam row 4

let count = 2;
$("#addRow").click(function () {
    var html = ''/span>;
    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  ;
});

//洗掉行。
$(document). on('click', '#removeRow', function () {
    $(this).closest('#inputFormRow').remove()。
});

//洗掉文本。
$(document). on('click', '#removeRow', function () {
    $(this).closest('h1').remove() 。
});

<!DOCTYPE html>
<html lang="en"/span>>

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

<body> 
    <form method="post" action=" >/span>
        <div class="行">
            <div class="col-lg-12">/span>
                <div id="inputFormRow"/span>>
                    <div class="input-group mb-3"/span>>
                        < input type="text"/span> name="title[]" class="form-control m-input" placeholder="Enter title"
                            autocomplete="off">
                        <div class="input-group-append"/span>>
                            < 按鈕 id="removeRow" type="button"/span> class="btn btn-danger"/span>> 移除</按鈕>
                        </div>/span>
                    </div>/span>
                </div>/span>
                <div id="newRow"/span>> </div>>
                < button id="addRow"/span> type="button"/span> class="btn btn-info"/span>> 添加行</按鈕> 
            </div>/span>
        </div>/span>
    </form> 


    <br><br> 
    <div id="face-two"/span>>
        <hr>/span>
        <h1> 我是第1行</h1> 
    </div>/span>

</body> 
</html>/span>

uj5u.com熱心網友回復：

當添加行時，你可以將相應的<h1> jQuery物件保存到添加行的.data。然后，當移除頂部的行時，只需進入資料找到底部的相關行即可。

。

let count = 2;
$("#addRow").click(function () {
    var html = ''/span>;
    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"/span>>

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

<body> 
    <form method="post" action=" >/span>
        <div class="行">
            <div class="col-lg-12">/span>
                <div id="inputFormRow"/span>>
                    <div class="input-group mb-3"/span>>
                        < input type="text"/span> name="title[]" class="form-control m-input" placeholder="Enter title"
                            autocomplete="off">
                        <div class="input-group-append"/span>>
                            < 按鈕 id="removeRow" type="button"/span> class="btn btn-danger"/span>> 移除</按鈕>
                        </div>/span>
                    </div>/span>
                </div>/span>
                <div id="newRow"/span>> </div>>
                < button id="addRow"/span> type="button"/span> class="btn btn-info"/span>> 添加行</按鈕> 
            </div>/span>
        </div>/span>
    </form> 


    <br><br> 
    <div id="face-two"/span>>
        <hr>/span>
        <h1> 我是第1行</h1> 
    </div>/span>

</body> 
</html>/span>

我還強烈建議不要構建無效的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="styleheet" href="/maxcdn. bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/span>>
    <form method="post" action=">/span>
        <div class="行">
            <div class="col-lg-12">/span>
                <div id="inputFormRow">/span>
                    <div class="input-group mb-3"/span>>
                        < input type="text"/span> name="title[]" class="form-control m-input" placeholder="Enter title"
                            autocomplete="off">
                        <div class="input-group-append"/span>>
                            < 按鈕 id="removeRow" type="button"/span> class="btn btn-danger"/span>> 移除</按鈕>
                        </div>/span>
                    </div>/span>
                </div>/span>
                <div id="newRow"/span>> </div>>
                < button id="addRow"/span> type="button"/span> class="btn btn-info"/span>> 添加行</按鈕> 
            </div>/span>
        </div>/span>
    </form> 


    <br><br> 
    <div id="face-two"/span>>
        <hr>/span>
        <h1> 我是第1行</h1> 
    </div>

uj5u.com熱心網友回復：

追加后，使用last()獲得最后一個孩子，找到洗掉按鈕并添加一個洗掉組的點擊事件監聽器。

。

let count = 2;
$("#addRow").click(function () {
    var html = ''/span>;
    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  ;
});

//洗掉行。
$(document). on('click', '#removeRow', function () {
    $(this).closest('#inputFormRow').remove()。
});

//洗掉文本。
$(document). on('click', '#removeRow', function () {
    $(this).closest('h1').remove() 。
});

<!DOCTYPE html>
<html lang="en"/span>>

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

<body> 
    <form method="post" action=" >/span>
        <div class="行">
            <div class="col-lg-12">/span>
                <div id="inputFormRow"/span>>
                    <div class="input-group mb-3"/span>>
                        < input type="text"/span> name="title[]" class="form-control m-input" placeholder="Enter title"
                            autocomplete="off">
                        <div class="input-group-append"/span>>
                            < 按鈕 id="removeRow" type="button"/span> class="btn btn-danger"/span>> 移除</按鈕>
                        </div>/span>
                    </div>/span>
                </div>/span>
                <div id="newRow"/span>> </div>>
                < button id="addRow"/span> type="button"/span> class="btn btn-info"/span>> 添加行</按鈕> 
            </div>/span>
        </div>/span>
    </form> 


    <br><br> 
    <div id="face-two"/span>>
        <hr>/span>
        <h1> 我是第1行</h1> 
    </div>/span>

</body> 
</html>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/319929.html

標籤：

上一篇：當游標在結果的下拉串列中上下移動時，jquery自動完成處理事件

下一篇：如何在Javasript的函式中使用變數？