CODEWITHSUNDEEP
javascriptjqueryhtml
MPortman
MPortman

Reputation: 181

Remove parent div on button press

trying to create a dynamic button system to add/remove inputs on clicks. I have the addButton working but not the deleteButton. What am I missing?

$(document).ready(function() {
    var maxFields = 20;
    var addButton = $('#plusOne');
    var deleteButton = $('#minusOne');
    var wrapper = $('#userNumbers');
    var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
    var x = 1;

    $(addButton).click(function () {
        if (x < maxFields) {
            x++;
            $(wrapper).append(fieldInput);
        }
    });

    $(deleteButton).click(function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="plusOne">+</button>
    <button type="button" id="minusOne">-</button>

    <div id="userNumbers">
       <p>
        <input type="text" id="person" name="person">
        </p>
    </div>

Upvotes: 3

Views: 57

Answers (3)

Raman Kumar
Raman Kumar

Reputation: 129

Try below solution, I care about the back end also because you have to send the data to back end developer so you have to give the array name for input fields such as name="person[]". anyway you can try this solution also.

$(document).ready(function(){
   var static_html = '<input  type="text" name="person[]" class="input_fields" />';
   $("#plus").click(function(){
       if($(".input_fields").length < 20 )
         $("#dynamic_field_container").append(static_html);
   });
    $("#minus").click(function(){
       if($(".input_fields").length > 1 )
         $(".input_fields:last").remove();
       else
         alert("This is default field so u can't delete");
   });

});
.input_fields{
   display:block;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="fa fa-plus fa-4x" id="plus"> </span>&nbsp;&nbsp;&nbsp;&nbsp;
<span class="fa fa-minus fa-4x" id="minus"> </span>

<div id="dynamic_field_container">
    <input type="text" name="person[]" class="input_fields" />
</div>

Upvotes: 0

Piotr Mirosz
Piotr Mirosz

Reputation: 866

Also you can do it with pure JS using child Nodes. :D Sometimes pure JS is beater than JQ

Explanation:

remove is a new function. It's a shortcut, making it simpler to remove an element without having to look for the parent node. It's unfortunately not available on old versions of Internet Explorer so, unless you don't want to support this browser, you'll have to use removeChild.

$(document).ready(function() {
    var maxFields = 20;
    var addButton = $('#plusOne');
    var deleteButton = $('#minusOne');
    var wrapper = $('#userNumbers');
    var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
    var x = 1;

    $(addButton).click(function () {
        if (x < maxFields) {
            x++;
            $(wrapper).append(fieldInput);
        }
    });

    $(deleteButton).click(function(e) {
        e.preventDefault();
        var myNode = document.getElementById("userNumbers");
        i=myNode.childNodes.length - 1;
        if(i>=0){
        myNode.removeChild(myNode.childNodes[i]);
        x--;
        }
        
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="plusOne">+</button>
    <button type="button" id="minusOne">-</button>

    <div id="userNumbers">
       <p>
        <input type="text" id="person" name="person">
        </p>
    </div>

Upvotes: 0

Blue
Blue

Reputation: 22911

The problem is, that $(this) inside the delete button handler refers to the minus button. That minus button is not inside each of the items (It's at the top. and doesn't have a parent div), so you need to reference the element you want to delete another way. In my case below, I'm selecting the last <div> in $(wrapper):

$(document).ready(function() {
    var maxFields = 20;
    var addButton = $('#plusOne');
    var deleteButton = $('#minusOne');
    var wrapper = $('#userNumbers');
    var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
    var x = 1;

    $(addButton).click(function () {
        if (x < maxFields) {
            x++;
            $(wrapper).append(fieldInput);
        }
    });

    $(deleteButton).click(function(e) {
        e.preventDefault();
        $(wrapper).find('div:last').remove();
        x--;
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="plusOne">+</button>
    <button type="button" id="minusOne">-</button>

    <div id="userNumbers">
       <p>
        <input type="text" id="person" name="person">
        </p>
    </div>

Upvotes: 5

Related Questions