Manh Nguyen Manh Nguyen - 3 years ago 61
Javascript Question

Error remove parent using Jquey in Laravel 5

I wrote a jquery function to add and remove some input, but I got this error, pls help me !
I using Jquery 3.2.1 and Laravel 5.4

Uncaught TypeError: Cannot read property 'remove' of undefined

Here is my view:

@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

Answer Source

you need to remove that currently clicked element parent div but you have common parent div for all elements so it's removing all elements . so wrap the each set of element to new div var tr = '<div class="new">.... </div> . so that you can easily remove specific div only take a look on my snippet

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download