Javascript 在Laravel 5中使用jQuery删除父级时出错

我写了一个jQuery函数来添加和删除一些输入，但我得到了这个错误，请帮助我！ 我使用jQuery 3.2.1和Laravel 5.4

未捕获类型错误：无法读取未定义的属性“remove”

以下是我的观点：

@extends('layouts.master')

@section('content')
    <script>
        $(document).ready(function () {
            $('.add').click(function () {
                var tr = '<div class="form-group">' +
                    '<label for="title">Title</label>' +
                    '<input type="text" class="form-control" name="title[]" value="{{ old('title') }}">' +
                    '</div>' +
                    '<div class="form-group">' +
                    '<label for="body">Body</label>' +
                    '<textarea class="form-control" rows="10"  name="body[]" value="{{ old('title') }}"></textarea>' +
                    '</div>' +
                    '<input type="button" class="btn btn-danger delete" value="x">';
                $('.info').append(tr);
            });
            $('.info').on('click', '.delete', function () {
                $(this).parent.parent.remove();
            });
        });
    </script>
    <div class="col-sm-8 blog-main">
        <h1>Create a post</h1>
        <hr>
        <form method="post" action="/blog/posts">
            <div class="info">
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="text" class="form-control" id="title" name="title">
                </div>
                <div class="form-group">
                    <label for="body">Body</label>
                    <textarea name="body" id="body" class="form-control" rows="10"></textarea>
                </div>
                {{csrf_field()}}
                <input type="button" class="btn btn-danger delete" value="x">
            </div>
            <input type="button" class="btn btn-lg btn-primary add" value="Add New Item">
            <button type="submit" class="btn btn-default">Publish</button>
        </form>
        @include('layouts.errors')
    </div>

@endsection

@extends（'layouts.master'））
@节（“内容”）
$（文档）.ready（函数（）{
$（'.add'）。单击（函数（）{
var tr=''+
“头衔”+
'' +
'' +
'' +
“身体”+
'' +
'' +
'';
$（'.info'）。追加（tr）；
});
$（'.info'）。关于（'单击'，'.delete'，函数（）{
$（this.parent.parent.remove（）；
});
});
创建帖子

标题
身体
{{csrf_field（）}}
发表
@包括（'layouts.errors'）
@端部

从

$(document).on('click', '.delete', function () {
    $(this).parent.parent.remove();
});

到

---

您需要删除当前单击的

元素
父div
，但所有元素都有公共父div，因此它将删除所有元素。因此
将每组元素包装到
新div
var tr='。这样您就可以轻松地删除
特定div
，只需查看一下我的代码片段


$（文档）.ready（函数（）{
$（'.add'）。单击（函数（）{
var tr=''+
“头衔”+
'' +
'' +
'' +
“身体”+
'' +
'' +
' ';
$（'.info'）。追加（tr）；
});
$（'.info'）。关于（'单击'，'.delete'，函数（）{
$（this.parent（）.remove（）；
});
});

创建帖子

标题
身体
发表
您尝试附加的整个HTML应该是一个div。因此您的代码应该如下所示

  var tr = '<div class="parent-div"><div class="form-group">' +
               '<label for="title">Title</label>' +
               '<input type="text" class="form-control" name="title[]" value="{{ old('title') }}">' +
               '</div>' +
               '<div class="form-group">' +
               '<label for="body">Body</label>' +
               '<textarea class="form-control" rows="10"  name="body[]" value="{{ old('title') }}"></textarea>' +
               '</div>' +
               '<input type="button" class="btn btn-danger delete" value="x"></div>'; 

试一试

试一试

或

它的意思是$（this.parent.parent.remove（）；parent.parent不存在。首先，将标记放在html代码下，然后尝试
$（this）.parent（）.remove（）
您的输入大概只有一个父项，这意味着什么呢
console.log（$（this.parent（））显示？您还可以插入
调试器
在
删除
操作行之前，激活您的代码检查器并调试，很高兴为您提供帮助：）Bro@ManhNguyen
  var tr = '<div class="parent-div"><div class="form-group">' +
               '<label for="title">Title</label>' +
               '<input type="text" class="form-control" name="title[]" value="{{ old('title') }}">' +
               '</div>' +
               '<div class="form-group">' +
               '<label for="body">Body</label>' +
               '<textarea class="form-control" rows="10"  name="body[]" value="{{ old('title') }}"></textarea>' +
               '</div>' +
               '<input type="button" class="btn btn-danger delete" value="x"></div>'; 

$(document).on('click', '.delete', function() {
  $(this).parent().remove();
});

$(this).closest("input").remove();

$(document).on('click', '.delete', function() {
   $(this).parents('.info').empty();
});

$(document).on('click', '.delete', function() {
   $(this).parents('.info').remove();
});