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

【问题标题】：Error remove parent using jQuery in Laravel 5在 Laravel 5 中使用 jQuery 删除父级时出错
【发布时间】：2017-12-31 02:52:22
【问题描述】：

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

Uncaught TypeError: Cannot read property 'remove' of undefined

这是我的看法：

@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

【问题讨论】：

这是说 $(this).parent.parent.remove(); parent.parent 不存在。
首先将
您的输入大概只有一个父级，console.log($(this).parent()); 显示什么？你也可以在remove操作行之前插入debugger;，激活你的代码检查器并调试step by step

标签： javascript php jquery laravel

【解决方案1】：

您需要删除 currently clicked 元素 parent div 但所有元素都有共同的父 div，因此它正在删除所有元素。所以 wrap 每组元素到 new div var tr = '<div class="new">.... </div> 。这样你就可以轻松删除specific div 只看我的sn-p

$(document).ready(function () {
            $('.add').click(function () {
                 var tr = '<div class="new"><div class="form-group">' +
                    '<label for="title">Title</label>' +
                    '<input type="text" class="form-control" name="title[]" value="">' +
                    '</div>' +
                    '<div class="form-group">' +
                    '<label for="body">Body</label>' +
                    '<textarea class="form-control" rows="10"  name="body[]" value=""></textarea>' +
                    '</div>' +
                    '<input type="button" class="btn btn-danger delete" value="x"> </div>';
                $('.info').append(tr);
            });
            $('.info').on('click', '.delete', function () {
                $(this).parent().remove();
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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="new">
                <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>
                
                <input type="button" class="btn btn-danger delete" value="x"> 
            </div>
            </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>

    </div>

【讨论】：

很高兴为您提供帮助 :) 兄弟@ManhNguyen

【解决方案2】：

改变

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

到

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

【讨论】：

【解决方案3】：

您尝试附加的整个 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>';

然后用这个替换你的代码

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

【讨论】：

【解决方案4】：

试试

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

【讨论】：

【解决方案5】：

试试

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

或

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

【讨论】：