如何通過按鈕 function 和 jQuery 刪除 div？

Question

我想刪除一個包含 3 個輸入標簽的 div 元素。 名為addTextbox的 function 使用 'before' 添加了一個 div 元素。 現在我需要刪除這個新創建的 div 元素。 有什么解決辦法嗎？

<div id="box" style="margin-bottom: 10px; display: inline-block; width: 100%";>
    <input type="hidden" name="nurse_id[]" value="" />
    <input type="text"  class="form-control"  name="nameAdd[]" placeholder="" style="width:30%;float:left;margin-right:8px";>
    <input type="text"  class="form-control" name="phoneNumberAdd[]" placeholder="" style="width:59%;float:left";>
    <input type="button" class="btn btn-alt-primary" value="+" onclick="addTextbox()" style="width:9%;float:right;font-weight:bold;">
</div>

<script>
let addTextbox = function() {
    let newP = "<div style='margin-bottom: 10px; display: inline-block; width:100%;'><input type='text' class='form-control' name='nameAdd[]' placeholder='' style='width:30%;float:left;margin-right:8px';> " +
        "<input type='text' class='form-control' name='phoneNumberAdd[]' placeholder='' style='width:59%;float:left';> " +
        "<input type='button' class='btn btn-alt-danger' value='-' onclick='removeNewData()' style='width:9%;float:right;font-weight:bold;'></div>";
    $('#box').before(newP);
}
</script>

Answer 1

嘗試這個。 將 onclick='removeNewData()' 更改為 onclick='removeNewData(this)'

let addTextbox = function() {
    let newP = "<div style='margin-bottom: 10px; display: inline-block; width:100%;'><input type='text' class='form-control' name='nameAdd[]' placeholder='' style='width:30%;float:left;margin-right:8px';> " +
                "<input type='text' class='form-control' name='phoneNumberAdd[]' placeholder='' style='width:59%;float:left';> " +
                "<input type='button' class='btn btn-alt-danger' value='-' onclick='removeNewData(this)' style='width:9%;float:right;font-weight:bold;'></div>";


    $('#box').before(newP);

}

並在腳本中添加以下 removeNewData function

let removeNewData = function(thisObj){
        $(thisObj).parent("div").remove();
    }

Answer 2

Javascript 有自己的remove方法。 選擇父部門並刪除它的孩子......

下面是例子：

 let newP = "<div style='margin-bottom: 10px; display: inline-block; width:100%;'><input type='text' class='form-control' name='nameAdd[]' placeholder='' style='width:30%;float:left;margin-right:8px';> " + "<input type='text' class='form-control' name='phoneNumberAdd[]' placeholder='' style='width:59%;float:left';> " + "<input type='button' class='btn btn-alt-danger' value='-' onclick='removeNewData()' style='width:9%;float:right;font-weight:bold;'></div>"; function addTextbox() { $("#box input").remove(); $('#box').append(newP); }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <div id="box" style="margin-bottom: 10px; display: inline-block; width: 100%";> <input type="hidden" name="nurse_id[]" value="" /> <input type="text" class="form-control" name="nameAdd[]" placeholder="" style="width:30%;float:left;margin-right:8px";> <input type="text" class="form-control" name="phoneNumberAdd[]" placeholder="" style="width:59%;float:left";> <input type="button" class="btn btn-alt-primary" value="+" onclick="addTextbox()" style="width:9%;float:right;font-weight:bold;"> </div>