How to hide certain classes in a widget box?

Question

So there is a button, which opens up a widgetbox window with multiple fields: a boldColumn containerLabel and a fieldColumn containerField.

<tr>
   <td class="boldColumn containerLabel">
       <span class="widgetLabel boldLabel ">Address</span>
   <td class="fieldColumn containerField">
       <-- Contains a field box -->
</tr>
<tr>
   <td class="boldColumn containerLabel">
       <span class="widgetLabel boldLabel ">Zip Code</span>
   <td class="fieldColumn containerField">
       <-- Contains a field box -->
</tr>

I was wondering, how can I just hide the first row (i.e. the first containerLabel and containerField)?

This is what I've done so far...

document.getElementById("nxw_bulkImportDocuments_form").addEventListener("click", testFunc);
    function funcTest() {
          var label = document.getElementsByClassName("boldColumn containerLabel");
          var field = document.getElementsByClassName("fieldColumn containerField");

          label[0].style.visibility = "hidden";
          field[0].style.visibility = "hidden";
     }

It's not working for some reason... Any help would be appreciated! THanks!

Is that code called? put a debugger and check what happens. Your code is correct as far I can tell — Claudio Redi, Jun 16 '15 at 16:07
Apparently when I see it in the webapp, it's not implementing the changes — user3851283, Jun 16 '15 at 16:11
You are calling testFunc and the function it's named funcTest. I have tested it and it works the way you have implemented it. Just be sure the function name are the same in the declaration and the call. Check this fiddle: https://jsfiddle.net/zxs8ekdp/ — andresigualada, Jun 16 '15 at 16:18
FYI, notice that your html is not a valid one, td tags are not closed properly. — andresigualada, Jun 16 '15 at 16:19
Because of your invalid HTML you are getting undefined element value by ClassName Please find My Answer below. — Sachink, Jun 16 '15 at 16:30

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Be sure that your JavaScript is inside a document.ready statement. This is so that your JavaScript runs after the DOM has been fully loaded.

If you're looking to do this quickly with jQuery, check out document.ready.

If you're looking to do this in vanilla JavaScript, this previous answer should do the trick.

edited May 23 '17 at 12:06

Community

1
1

answered Jun 16 '15 at 16:11

Danny Delott

6,756
3
33
57

score 0 · Answer 2 · answered Jun 16 '15 at 16:20

it can be helpful

<tr  class="cond">
   <td class="boldColumn containerLabel">
       <span class="widgetLabel boldLabel ">Address</span>
   <td class="fieldColumn containerField">
       <-- Contains a field box -->
</tr>
<tr class="cond">
   <td class="boldColumn containerLabel">
       <span class="widgetLabel boldLabel ">Zip Code</span>
   <td class="fieldColumn containerField">
       <-- Contains a field box -->
</tr>

javascript

document.getElementById("nxw_bulkImportDocuments_form").addEventListener("click", testFunc);
    function funcTest() {
          var field = document.getElementsByClassName("cond");
          field[0].style.display = "none";
     }

score 0 · Accepted Answer · answered Jun 16 '15 at 16:28

Your HTML is not valid

I have made the correction please find

And your function name is also incorrect

JSField http://jsfiddle.net/sachinkk/n4njbmbr/

 function funcTest() {
     var label = document.getElementsByClassName("boldColumn");
     console.log(label.length);
     var field = document.getElementsByClassName("fieldColumn containerField");

          label[0].style.visibility = "hidden";
          field[0].style.visibility = "hidden";
     }
document.getElementById("nxw_bulkImportDocuments_form").addEventListener("click", funcTest);

<table>
<tr>
   <td class="boldColumn containerLabel">
       <span class="widgetLabel boldLabel ">Address</span>
    </td>
   <td class="fieldColumn containerField">
       <!-- Contains a field box -->fsfs
       </td>
</tr>
<tr>
   <td class="boldColumn containerLabel">
       <span class="widgetLabel boldLabel ">Zip Code</span>
    </td>
   <td class="fieldColumn containerField">
       <!-- Contains a field box -->fsf
    </td>
</tr>
</table>
       
       <button id="nxw_bulkImportDocuments_form">click </button>

How to hide certain classes in a widget box?

3 Answers3