Creating A Crud System, Plus And Minus Not Working Javascript

Hi I am creating a CRUD system and I am having trouble adding and removing my data. The issue is the + (duplicate) works fine apart from once i - (minus) a column. How would i effe

Solution 1:

The problem is that you are removing the parent container of each cloned element, ant that parent contains all the cloned elements. Try this instead:

// Clone countvar i =0;

// Cloned element cachevar copy = document.querySelector('.propertyNew').cloneNode(true);

// Container for the cloned elementsvar container = document.getElementById('clone-container');

// Clone elementsfunctionduplicate() {
    var clone = copy.cloneNode(true);
    container.appendChild(clone);
    i++;
}

// Remove the last element from the listfunctionminus() {
    // Keep at least one elementif(i >= 1) {
        container.lastChild.remove();
        i--;
    }
}

<divid="clone-container"><divclass="propertyNew row"><divid="props"><divclass="col-md-5"><label>Properties</label></div><divclass="col-md-7"><divclass="col-md-5"><label>Current Price</label></div><divclass="col-md-5"><label>Price With Offer</label></div><divclass="col-md-2"><br></div></div></div></div></div><br><aid="deleteProperty"class="minus"onclick="minus()"><iclass="fa fa-minus fa-1x"></i> Remove
</a><aid="addExtraPropery"onclick="duplicate()"><iclass="fa fa-plus fa-1x"></i> Add
</a>