javascript - 根据子项的部分名称 id 隐藏父级 div

Question

当他的 child 是文本区域时，我希望隐藏父div类“field”

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 子元素的元素，并且 隐藏()。

$('.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>