Page 1 of 1

java Script ot remove html elements

Posted: Wed Nov 18, 2020 2:47 pm
by 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

Re: java Script ot remove html elements

Posted: Wed Nov 18, 2020 3:06 pm
by burt
$('label[for="pTax"]').parent().remove();

Try that?

Re: java Script ot remove html elements

Posted: Wed Nov 18, 2020 5:32 pm
by 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.

Re: java Script ot remove html elements

Posted: Wed Nov 18, 2020 7:56 pm
by 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.

Re: java Script ot remove html elements

Posted: Wed Nov 18, 2020 8:49 pm
by 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.

Re: java Script ot remove html elements

Posted: Thu Nov 19, 2020 10:10 am
by 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).