"Please fill the required field" - Hidden field is blocking my submit-CodePudding

I have a wordpress page with buddyboss installed. The Pagebuilder is Elementor pro. The Plugin Buddyboss gives you Facebook like functions. In buddy boss, it's no problem to comment on posts &co, but if I have a post outside of the buddyboss system, I can't submit my comment. There's one hidden field that must be filled in order to submit my comment. Line of code

If I put in a script that targets the area by its Id and tries to delete it, it won't work. If I delete it manually, I can submit it. Do you guys have any idea?

Without the CSS that hides my Textarea it looks like this:

<textarea 
  id="aad669143d1a2b175fb447cb79a28f4b" 
  aria-label="hp-comment" 
  aria-hidden="true" 
  name="comment" 
  autocomplete="new-password" 
  style="" 
  tabindex="-1" 
   
  aria-describedby="aad669143d1a2b175fb447cb79a28f4b-error" 
  aria-invalid="true">
</textarea>

CodePudding user response：

Based on the code you posted in your comment, it turns out that targeting the aria-label might indeed be what you needed. In order to remove it, you would modify your code as follows:

var element_to_remove = document.querySelector('[aria-label="hp-comment"]');
element_to_remove.remove();

The first line finds the element based on the attribute aria-label and its value hp-comment, the second line removes it from the HTML tree (which should work in all modern browsers; alternatively, you could try the parentNode way you outlined).

You can try it using this extended code snippet:

var element_to_remove = document.querySelector('[aria-label="hp-comment"]');
console.log(element_to_remove.id); // the id is logged
element_to_remove.remove(); // remove the element
element_to_remove = document.querySelector('[aria-label="hp-comment"]'); // nothing here
console.log(element_to_remove); // --> null is logged

<textarea id="aad669143d1a2b175fb447cb79a28f4b" aria-label="hp-comment" aria-hidden="true" name="comment" autocomplete="new-password" style="" tabindex="-1"  aria-describedby="aad669143d1a2b175fb447cb79a28f4b-error" aria-invalid="true">
</textarea>

(Of course, the lines 2, 4 and 5 are just for demonstrating and not really necessary.)