Как удалить добавленный div нажатием кнопки? - PullRequest
Новая
       4

Как удалить добавленный div нажатием кнопки?

2 голосов
/ 12 февраля 2020

Я видел много примеров здесь. Но здесь я столкнулся с другой проблемой, что событие даже не обнаружено (кнопка в добавленном div). Я добавляю текстовое поле и кнопку, используя метод добавления, при нажатии кнопки, которая работает идеально. Но когда я пытаюсь удалить тот же элемент div, используя нажатие кнопки, это не работает. 

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

**here the + button appending div perfectly.the - is not working**

Ответы [ 3 ]

4 голосов
/ 12 февраля 2020

используйте closest () вместо parent () , так как вы хотите перейти к самому верхнему, а не непосредственному родителю.

Проверьте работу ниже фрагмент: 

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

Примечание: - Проверьте ниже тему для лучшего понимания parent(), parents() и closest()

Разница между jQuery функции parent (), parent () и closest ()

1 голос
/ 12 февраля 2020

Вы можете использовать .parents() или closest() для достижения этого. 

 $("#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>
1 голос
/ 12 февраля 2020

.parents()

Методы .parents() и .parent() аналогичны, за исключением того, что последний перемещается только на один уровень вверх Дерево DOM. Кроме того, метод $( "html" ).parent() возвращает набор, содержащий документ, тогда как $( "html" ).parents() возвращает пустой набор.

Поскольку элемент, по которому щелкнули (.btnRemove) , не является прямым потомком из (div.row) вместо .parent() использовать .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>
...