单击添加 html 内容并通过单击“删除”链接将其删除

Onclick add html content and remove it by clicking "delete" link

本文关键字：删除 单击 链接 html 添加      更新时间：2023-09-26

我有一些问题，请帮我找出错误在哪里。

  $(document).ready(function(){
   $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents .row-wrap').size() + 1;
    $('body').on('click', '.add-item', function() {
            $('<div class="row-wrap cf"><div class="col-md-3 col-sm-3 col-xs-12"><input type="text" placeholder="Наименование" name="item_name' + i +'"></div><div class="col-md-2 col-sm-2 col-xs-12"><input type="text" placeholder="Количество" name="item_count' + i +'"></div><div class="col-md-6 col-sm-6 col-xs-12"><input type="text" placeholder="Требования" name="item_demand' + i +'"></div><div class="col-md-1 col-sm-1 col-xs-12"><a href="#" class="delete-item">delete</a></div></div>').appendTo(scntDiv);
            i++;
            return false;
    });
    $('.col-md-1').on('click', '.delete-item', function() { 
        event.preventDefault();
            if( i > 2 ) {
                    $(this).parents('.row-wrap').remove();
                    i--;
            }
            return false;
    });
});
 });

在单击"添加项目"时，jquery使用一些html创建新行。通过单击"删除项目"，我需要删除除第一行以外的此父.row-wrap。这是JsFiddle链接我的错误在哪里？

即使您将 .on（） 与事件委托语法一起使用，它也无法正常工作，因为事件绑定到的元素是动态创建的。

您正在将处理程序注册到删除按钮的父级col-md-1，但该元素也是动态创建的，因此当您说$('.col-md-1').on('click',...)时，处理程序不会添加到任何元素中。

若要使用事件委派，应将处理程序添加到预先存在的元素（动态元素的祖先）中，并将动态元素选择器作为第二个参数。

在您的情况下，由于您要将动态内容添加到scntDiv元素，因此您可以将处理程序绑定到该元素，例如

      scntDiv.on('click', '.delete-item', function () {
          event.preventDefault();
          if (i > 2) {
              $(this).parents('.row-wrap').remove();
              i--;
          }
          return false;
      });

演示：小提琴

相关文章：