How to remove an appended div on a button click?

Question

I have seen lot of example here.But here am facing another problem that the event is not even detected (button in appended div). Am adding some text-box and a button using append method on a button click which works perfectly.but when I am trying to remove the same div using a button click its not working.

$(document).ready(function() {

  $("#add").click(function() {

    $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>"))
  });
  $('body').on('click', '.btnRemove', function() {
    $(this).parent('div.row').remove()
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv" id="mydiv">
  <div class="form-group">
    <div class="col-md-10">
      <select name="templeid" id="tid1" class="form-control">
        <option>-Select Temple-</option>
        <option value="temp_id">A templename</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <div class="col-md-10">
          <input type="text" name="vname[]" class="form-control" placeholder="Vazhipad Name" />
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <div class="col-md-10">
          <input type="text" name="vprize[]" class="form-control" placeholder="Vazhipad Prize" />
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <div class="col-md-10">
          <button type="button" id="add" class="btn btn-primary">+</button>
        </div>
      </div>
    </div>
  </div>
</div>

Give us your HTML content as well, please. – Nguyễn Văn Phong Feb 12 '20 at 06:28 — Nguyễn Văn Phong, Feb 12 '20 at 06:28

Alive to die - Anant · Accepted Answer · 2020-02-12T06:43:17.440

use closest() instead of parent(), as you want to traverse to up-most parent, not the immediate one.

Check below working snippet:

$(document).ready(function () {
  $("#add").click(function () {
    $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>"))
    });
    $('body').on('click', '.btnRemove', function () {
      $(this).closest('div.row').remove()
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="mydiv"></div>

Note:- Check below thread for better understanding of parent(),parents()and closest()

Difference between jQuery parent(), parents() and closest() functions

could you help me how to get name[] value in controller? – Feb 14 '20 at 14:01 — , Feb 14 '20 at 14:01

Mamun · Answer 2 · 2020-02-12T06:41:52.600

.parents()

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.

Since the clicked element (.btnRemove) is not the direct children of (div.row) instead of .parent() use .parents():

$(document).ready(function () {
    $("#add").click(function () {
      $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>"));
    });
    $('body').on('click', '.btnRemove', function () {
      $(this).parents('div.row').remove()
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="mydiv"></div>

score 0 · Answer 3 · answered Feb 12 '20 at 06:31

You can use .parents() or closest() to achieve it.

 $("#add").click(function () {

            $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>"))
        });
        $('body').on('click', '.btnRemove', function () {
            $(this).parents('div.row').remove()

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv" id="mydiv">


        <div class="form-group">
          <div class="col-md-10">
              <select name="templeid" id="tid1" class="form-control">
                            <option >-Select Temple-</option>
                           @foreach (var a in ViewBag.namelist)
                           {
                          <option value="@a.temp_id">@a.templename</option>
                           }
                            </select>
                        </div>
                </div>

        <div class="row">
             <div class="col-md-4">

                <div class="form-group">
                    <div class="col-md-10">
                       <input type="text" name="vname[]"class="form-control" placeholder="Vazhipad Name" />
                    </div>
                </div>
             </div>

  <div class="col-md-4">

                <div class="form-group">
                    <div class="col-md-10">
                        <input type="text" name="vprize[]"class="form-control" placeholder="Vazhipad Prize" />
                    </div>
                </div>
             </div>

   <div class="col-md-4">

                <div class="form-group">
                    <div class="col-md-10">
                        <button type="button" id="add" class="btn btn-primary">+</button>
                    </div>
                </div>

       </div>
            </div>
            </div>

How to remove an appended div on a button click?

3 Answers3