如何使用jQuery通過按鈕功能洗掉div？

我想洗掉一個包含 3 個輸入標簽的 div 元素。名為的函式addTextbox使用“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>

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

嘗試這個。將 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 函式

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

標籤：javascript html 查询

上一篇：jquery在最近的元素之前移動元素

下一篇：在加載時隱藏特定文本，但使用相同的文本來標識單擊事件的元素