Question

当他的孩子是文本区域时，我希望隐藏父div类“字段”

var child = document.querySelector('[id^=booked-textarea-paragraph-text-]').id;
var parent = child.parents('div');

console.log(child);
console.log(parent);

<div class="field">
<label class="field-label">Remarque éventuelle :</label>
<br/>
<textarea id="booked-textarea-paragraph-text-label---3501121" data-calendar-id="19" name="paragraph-text-label---3501121"></textarea>
</div>

您可以检查此jsfiddle => http://jsfiddle.net/zc1orbp8/

Answer 1

您的JS代码似乎很混乱。例如，this将是对window的引用，而不是预期的任何特定元素。另外，child将是一个字符串，因此对其调用parents()无效。

如果您乐于使用jQuery，则可以使用:has在一行中解决此问题，选择包含textarea子元素和hide()的元素。

$('.field:has(textarea)').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
  <label class="field-label">Remarque éventuelle :</label><br/>
  <textarea id="booked-textarea-paragraph-text-label---3501121" data-calendar-id="19" name="paragraph-text-label---3501121"></textarea>
</div>

Answer 2

尝试此代码

$("textarea[name='paragraph-text-label---3501121']").closest("div.field").css("display", "none"); // it is not good practice to use name like this. "paragraph-3501121" this could be better one

Answer 3

请使用普通的javascript，您可以使用类似的方法，尝试一下，看看它是否可以帮助您

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>

 <div class="field">
    <label class="field-label">Remarque éventuelle :</label><br/>
    <textarea id="booked-textarea-paragraph-text-label---3501121" data-calendar- 
     id="19" name="paragraph-text-label---3501121"></textarea>
    <br>
    <button id="button">Hide this</button>
 </div>
 <script type="text/javascript">
   let child    =document.getElementById("booked-textarea-paragraph-text-label-- 
   -3501121");
    let parent  =child.parentNode;
    let button =document.getElementById("button");
    button.addEventListener("click",function({
       parent.style.display ="none";
    })
 </script>

根据子代的部分名称ID隐藏父代

3 个答案: