java Script ot remove html elements

[Mikepo]

I'm currently developing a new admin/categories tab, but I'm wanting to remove the following <div>'s from the core categories file and place them in the new tab. My new tab works well by editing the categories.php to manually remove the unwanted <div> elements.


<div class="form-group row">
<label for="pTax" class="col-form-label col-sm-3 text-left text-sm-right"><?php echo TEXT_PRODUCTS_TAX_CLASS; ?></label>
<div class="col-sm-9">
<?php
echo tep_draw_pull_down_menu('products_tax_class_id', $tax_class_array, $pInfo->products_tax_class_id, 'id="pTax" onchange="updateGross()"');
?>
</div>
</div>

<div class="form-group row">
<label for="pNet" class="col-form-label col-sm-3 text-left text-sm-right"><?php echo TEXT_PRODUCTS_PRICE_NET; ?></label>
<div class="col-sm-9">
<?php
echo tep_draw_input_field('products_price', $pInfo->products_price, 'required aria-required="true" id="pNet" class="form-control w-25" onchange="updateGross()"');
?>
</div>
</div>
<div class="form-group row">
<label for="pGross" class="col-form-label col-sm-3 text-left text-sm-right"><?php echo TEXT_PRODUCTS_PRICE_GROSS; ?></label>
<div class="col-sm-9">
<?php
echo tep_draw_input_field('products_price_gross', $pInfo->products_price, 'id="pGross" class="form-control w-25" onchange="updateNet()"');
?>
</div>
</div>


My question is, which I'm sure is possible, how does one use java script to remove the elements and which hook to place the script in.
Any advice will be appreciated.
Mike

[burt]

$('label[for="pTax"]').parent().remove();

Try that?

[burt]

If that did work, you can add in the extra bits;

$('label[for="pTax"], label[for="pNet"], etc, etc, etc').parent().remove();

It's not particularly graceful. Perhaps each:

<div class="form-group row">

Should have a .css selector attached (in core code), eg:

<div class="form-group row" id="pTax">

Which would then change the js to

$('#pTax, #pNet, etc, etc, etc').remove();

Thoughts? It would make things more flexible with .css as well.

[Mikepo]

yep it did work and your suggestion of a .css selector attached

<div class="form-group row" id="pTax">

would be an improvement in core, becuase that was what I was initially looking for, even with my limited coding abilitity.

Category tab is now working without core change. Thank you.

[ecartz]

Note that it couldn't be pTax because that's the id value of the input and id values have to be unique on the page. E.g.

Code: Select all

<div class="form-group row" id="pTaxE">

would probably work. But pTax will conflict. I think that it would break the label's relationship to the input in practice. But since it's out of specification the actual behavior is undefined.

[burt]

I think it's worth doing. I'll look into this today (and ensure they have a non conflicting name - thanks for spotting Matt).