Sightly Remove Item and Update Item Id Concept v1.0.1

by Nash

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div data-module="video-list-module">
  <div id="video-card-wrapper-1" class="video-card-container">
    <div class="panel panel-default video-card margin-top-lg dynamic-attribute" data-card-id="1">
      <div class="panel-heading">
        <h3 class="panel-title">
          <span class="fa fa-angle-down margin-right-lg clickable card-toggler dynamic-attribute" data-card-id="1"></span>
          <span class="video-card-label dynamic-attribute">Video 1</span>
        </h3>
      </div>
      <div id="card-body-1" class="panel-body dynamic-attribute">
        <form class="form-horizontal">
          <div class="col-xs-12">
            <div class="row">
              <div class="col-xs-12">
                <label class="radio-inline">
                <input type="radio" value="New" checked="checked" name="video-ad-type"> Add new video</label>
                <label class="radio-inline">
                <input type="radio" value="Existing" name="video-ad-type"> Choose existing video</label>
              </div>
            </div>
            <div class="row margin-top-lg">
              <div class="col-xs-12">
                <div class="form-group">
                  <div class="col-xs-12 col-sm-3">
                    <label for="txt-order-form-video-name-1" class="control-label pull-left padding-top-none dynamic-attribute">Video Name 
                      <span class="required-indicator-text">*</span>
                    </label>
                  </div>
                  <div class="col-xs-12 col-sm-9">
                    <input type="text" class="form-control module-input italicized-placeholder dynamic-attribute" id="txt-order-form-video-name-1" placeholder="Type a video name">
                  </div>
                </div>
                <div...

CSS

.btn-add-video {
  display: none;
}

.video-card-container:last-child .btn-add-video{
  display: block;
}

JavaScript

var BUTTON_REMOVE_VIDEO_CLASS = "btn-remove-video";

var CLASS_SELECTOR = ".";

var CLICK_EVENT = "click";

var DYNAMIC_ELEMENT_ATTR_CLASS = "dynamic-attribute";

var MODULE_SELECTOR = "[data-module='video-list-module']";

var VIDEO_CARD_CONTAINER_CLASS = "video-card-container";


function _attachEvent() {
	var removeLinkSelector = _getClassSelector(BUTTON_REMOVE_VIDEO_CLASS);
	
  _delegateEvent(CLICK_EVENT, removeLinkSelector, _onRemoveVideoCardClicked);
}

function _checkClassExistence( element, className) {
	return $(element).hasClass(className);
}

function _delegateEvent( eventName, itemSelector, eventFunc ) {
	$(MODULE_SELECTOR).on(
  	eventName, 
    itemSelector, 
    eventFunc
  );
}

function _findElement ( selector, targetSelector ) {
	return $(selector).find(targetSelector);
}

function _getClassSelector( className ) {
	return CLASS_SELECTOR + className;
}


function _getElement( selector ) {
	return $(selector);
}

function _getElementData(element, key) {
	return $(element).data(key);
}

function _getIdSelector (id) {
	return "#" + id;
}

function _onRemoveVideoCardClicked(event) {
  //_noOfActiveCards--;
  _removeSelectedCard( event.target );
  _updateActiveCards();
}

function _removeSelectedCard( selectedCard ) {
	selectedCard = $(selectedCard).closest(".btn-remove-video");
  console.log(selectedCard);
  var selectedCardContainer = _getElementData(selectedCard, "parent");
  /*
   * WHERE DID HE GET THAT? -_-
   */
  console.log(selectedCardContainer);
  $(selectedCardContainer).remove();
}

function _setActiveCardsId ( id, sequence) {
	id.splice(-1, 1);
  id.push(sequence);
  id = id.join("-");
	return id;
}

function _setActiveCardsChildrensId( parent, inx) {
	var elementToUpdate = _findElement(parent, _getClassSelector(DYNAMIC_ELEMENT_ATTR_CLASS));
  for (var i = 0; i < elementToUpdate.length; i++ ){
  	var ele = elementToUpdate[i];
    _setElementAttr(ele, inx);
  }
}

function _setElementAttr (ele, sequenceValue) {
	var dataFor = ele.htmlFor,
...