Select Part of a Attribute - JQuery

Question

I need to get the number only from an attribute (The number is dynamic). The button/anchor looks like this:

<a href="#" class="btn btn-danger btn-small" data-removefield="collection" data-field="bc_inventorybundle_menu_product_0">Delete Dish</a>

The part I need to dissect is this bit 'bc_inventorybundle_menu_product_0' I only want the number, for use in another function (Delete a LI with an ID of menuitem0_dish)

The code I use for selecting ID's elsewhere is:

  function getNum(element, attrPrefix) {
      //set prefix, get number
      var prefix = attrPrefix;
      var num = element.attr("id").substring((prefix.length));
      return num;
  }

It works great on ID's but I cant seem to get it to work for Attributes instead of ID's

So User clicks delete button bc_inventorybundle_menu_product_0 then jQuery removes the < li id="menuitem0_dish">

I can't add an ID to the button so I have to use the attribute of the button. As I'm sure you can tell I'm a complete noob when it comes to JS/JQuery.

EDIT

Having read all the answers I feel I may need to elaborate a little.

I think the biggest issue is registering when the Button/Anchor is clicked.

What I currently have is this, which I know must be wrong:

  $(document).on('click', 'data("field")', function(event) {
       deleteDish(this);
  });

  function getbutNum(element, attrPrefix) {
       //set prefix, get number
       var prefix = attrPrefix;
       var butnum = element.data("field").substring(prefix.length); //Changed as per suggestions
       return butnum;
  }

  function deleteDish(field) {
       var numbut = getbutNum();
       //Delete the UL/LI
       console.log("Num But" + numbut);
       }

Asides from all else this gives me an error of 'unrecognized expression: data("field")'

Answer 1

Have you tried selecting your actual data attribute:

var num = element.attr("data-field").substring(prefix.length);

Or:

var num = element.data("field").substring(prefix.length);

EDIT

First add a class to your anchor element (I'm going under the assumption that you have more than one of these):

<a href="#" class="btn btn-danger btn-small delete-dish" data-removefield="collection" data-field="bc_inventorybundle_menu_product_0">Delete Dish</a>

Then:

$(".delete-dish").on("click", function (e) {
    e.preventDefault();

    var fieldData = $(this).data("field"),
        num = fieldData.substring(fieldData.lastIndexOf("_") + 1);

    console.log("Num But" + num);
});

Here is a fiddle to demonstrate

Answer 2

Using the attribute name that contains your input should work:

function getNum(element, attrPrefix) {
      //set prefix, get number
      var prefix = attrPrefix;
      var num = element.attr("data-field").substring((prefix.length));
      return num;
}

http://jsfiddle.net/zf3hmo4q/

Answer 3

Maybe something like this?

var getNumberFromAttribute = function(id, field) {
    var field = $(id).data(field);
    var parts = field.split("_");
    return parts[parts.length - 1]
}

Here's a jsfiddle http://jsfiddle.net/o6go79cL/

UPDATE

You could just pass in the element. The only purpose of the id was to select the object. So you could also just do:

var getNumberFromAttribute = function(elm, field) {
    var field = $(elm).data(field);
    var parts = field.split("_");
    return parts[parts.length - 1]
}

number = getNumberFromAttribute(anchorTag, "field");

Answer 4

Considering you want to parse attributes with "data-*" name:

function getNum(element, dataName, dataPrefix) {
    var num = element.data(dataName).replace(dataPrefix, "");
    return num;
}
console.log(getNum($(".btn"), "field", "bc_inventorybundle_menu_product_"));