How to remove div by a button function with jQuery?-CodePudding

I want to delete a div element that contains 3 input tags. The function named addTextbox adds a div element using 'before'. Now I need to erase this newly created div element. Any solution?

<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>

CodePudding user response：

Javascript have own remove method. Pick the parent division and just remove it's child...

Here down is example:

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>

CodePudding user response：

try this. change onclick='removeNewData()' to 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);

}

and add below removeNewData function in script

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