Javascript：无法隐藏整个html行（div标签）

Question

我试图通过JavaScript隐藏整个html行，这是一个div标签。 但是，到目前为止，我一直无法做到这一点。 我要隐藏的ID是“行”，位于父div中。 我想隐藏此div和所有子div中包含的所有内容（可能未使用正确的术语）

这是我的HTML。 如您所见，“行”值包含在父div中。 “ TherapistsName”是文本区域的名称：

var therapistsName = container.find(".TherapistsName");
var row = therapistsName.parents(".row").first();
row.hide();

这是我要隐藏的html：

<div class="row mr-display-row row-eq-height work-task-question-container question-row" style="display: flex;" data-node-name="TherapistsName-7" data-persist="true">
     <div class="col-4 mr-display-title">
         <span class="displayValue">Therapists Name:</span>
     </div>
     <div class="col-8">
        <div class="question-item" style="display: table-cell; word-break: break-word; overflow-wrap: break-word;">
             <div class="input-text-length-container">
                  <textarea name="TherapistsName-7" class="main-input TherapistsName input-text-length auto-size" cols="85" data-allow-persist-answer="True" data-developer-name="TherapistsName" data-disable-on-hide="False" data-hidden="False" data-identifier="" data-node-name="TherapistsName-7" data-parent-branch-name="SpokeWithTherapist-Yes" data-previous-value="" data-question-group-name="" data-question-id="175" data-question-messages="[]" data-read-only="False" data-reset-answer-on-hide="True" data-tree-level="3" data-type="string" data-value-orig="" data-value-type="TextArea" id="TherapistsName-7" maxchars="1000" onchange="assignedWorkTasks.QuestionChange(this);;assignedWorkTasks.QuestionChangeComplete(this);" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 26px;"></textarea><br>
                       <span class="chars-remaining" style="width:100%;float:left;margin:0 0 0 0;font-size:10px;">1000 characters remaining
                       </span>
             </div>            
        </div>
    </div>
</div>

知道为什么这会隐藏整个div标签吗？ 谢谢

Answer 1

为什么不添加一个包含display:none;的CSS类呢display:none; 然后使用js将此类添加到父类列表？

Answer 2

您可以使用jQuery解决此问题。

$("body").find(".TherapistsName").find(".row").first().hide();

Answer 3

row.hide(); 您是说隐藏此元素。 它正在做您所要求的。 使用选择器.row隐藏找到的第一个父元素。

由于您使用的是jQuery，因此可以在此处使用一些答案。

这是jQuerys网站的一个简单示例=>

var spans = $( "span" );
$( "p" ).find( spans ).css( "color", "red" );

不要忘记，您可以使用jQuerys美元符号的缩写$("someElement")来快速选择所需的DOM元素。

文件参考： https : //api.jquery.com/find/

Answer 4

首先将ID添加为行，然后添加
$（'＃row'）。addClass（“ displaynone”）; 通过添加displaynone，您绝对可以隐藏

    <div class="row mr-display-row row-eq-height work-task-question-container question-row" id='row' style="display: flex;" data-node-name="TherapistsName-7" data-persist="true">
     <div class="col-4 mr-display-title">
         <span class="displayValue">Therapists Name:</span>
     </div>
     <div class="col-8">
        <div class="question-item" style="display: table-cell; word-break: break-word; overflow-wrap: break-word;">
             <div class="input-text-length-container">
                  <textarea name="TherapistsName-7" class="main-input TherapistsName input-text-length auto-size" cols="85" data-allow-persist-answer="True" data-developer-name="TherapistsName" data-disable-on-hide="False" data-hidden="False" data-identifier="" data-node-name="TherapistsName-7" data-parent-branch-name="SpokeWithTherapist-Yes" data-previous-value="" data-question-group-name="" data-question-id="175" data-question-messages="[]" data-read-only="False" data-reset-answer-on-hide="True" data-tree-level="3" data-type="string" data-value-orig="" data-value-type="TextArea" id="TherapistsName-7" maxchars="1000" onchange="assignedWorkTasks.QuestionChange(this);;assignedWorkTasks.QuestionChangeComplete(this);" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 26px;"></textarea><br>
                       <span class="chars-remaining" style="width:100%;float:left;margin:0 0 0 0;font-size:10px;">1000 characters remaining
                       </span>
             </div>            
        </div>
    </div>
</div>

jQuery的

var therapistsName = container.find(".TherapistsName");
var row = therapistsName.parents(".row").first();
$('#row').addClass("displaynone");

Answer 5

看起来它确实隐藏了整行，

演示隐藏行

但是如前所述，如果您能够添加ID并避免使用jQuery遍历，则可以大大简化它。