CODEWITHSUNDEEP
javascriptjquery
Jimmy
Jimmy

Reputation: 12487

Same function for different sections - relative referencing in jquery

By using relative references I am able to remove items which have been added to the list within a specfic part of the form. For example, by adding a requirement it can be deleted just from the requirement.

My issue is two fold:

  1. Adding an item to references adds it to all three categories
  2. When I try to add values to the other sections (qualifications) it says my input was blank.

http://jsfiddle.net/spadez/9sX6X/60/

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.form').on('click', '.add', function () {
      value_src.focus();
    if ($.trim(value_src.val()) != '') {
        if (currentFields < maxFields) {
            var value = value_src.val();
            var html = '<div class="line">' +
                '<input id="accepted" type="text" value="' + value + '" />' +
                '<input type="button" value="X" class="remove" />' +
                '</div>';

            $(html).appendTo(container);
            value_src.val('');
            currentFields++;
        } else {
            alert("You tried to add a field when there are already " + maxFields);
        }
    } else {
        alert("You didn't enter anything");
    }

})
    .on('click', '.remove', function () {
        value_src.focus();
    $(this).parents('.line').remove();
    currentFields--;
});

Is it possible to modify this code without repeating it for each section, by using relatively references such as "parent" for example. I want to use this same script for all three sections but have it so each list is independant.

I'm new to javascript so I was wondering if this is possible because I only managed to get it working on the delete.

Upvotes: 0

Views: 135

Answers (2)

jantimon
jantimon

Reputation: 38140

You have to use this to get the current element. In your case this refers to the button which was clicked.
The next step is to get the input box which belongs to the button. E.g. $(this).prev(); like in this example:

$('.form').on('click', '.add', function () {
   var value_src = $(this).prev();

http://jsfiddle.net/9sX6X/62/

The same is also true for your appending part. Your are appending your html to all three elements which match $('.copies'). Instead you have to try to get there from this.

$('.form').on('click', '.add', function () {
   var value_src = $(this).prev();
   var copies = $(this).parent().prev();

http://jsfiddle.net/9sX6X/63/

Upvotes: 1

James Montagne
James Montagne

Reputation: 78650

I would suggest adding a wrapping div to each section. 

<div class="section">
    <h4>Requirements</h4>
    <div class="copies"></div>
    <div class="line">
        <input id="current" type="text" name="content" placeholder="Requirement" />
        <input type="button" value="Add" class="add" />
    </div>
</div>

Then you can do this:

var $section = $(this).closest(".section");

$(html).appendTo($section.find(".copies"));

This will add to just the related .copies element instead of to all .copies as your code does now. A similar approach can be used for all other elements as well.

Upvotes: 1

Related Questions