javascript - 如何检查 jquery 元素是否为 `del` 标记？

Question

我在段落旁边有一个 HTML 复选框。当用户选中该框时，我想使用 css bootstrap 在段落中加上删除线.

要添加删除线，我应该用 <del></del> 包裹段落标签。

我可以用 <del></del> 正确地包装段落当复选框被选中时。但是，我无法删除 <del></del>当用户取消选中该框时标记。

我的代码似乎无法检查元素是否为 del .

我创建了一个 fiddler 来向您展示正在发生的事情 https://jsfiddle.net/vo1npqdx/1335/

在fiddler中，你会看到代码if (display.is('del')) { .... }失败，因此 if 语句中的代码永远不会被触发。

我尝试将 html 代码打印到控制台以确保我正在处理正确的元素，并且它清楚地显示了正确的代码。

如何从 del 中展开我的段落标签？

这是我的JS代码

$(function(){

  $('.custom_delete_file:checkbox').click(function(e){
    var self = $(this);
    var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');

    if (self.is(':checked')) {
      display.wrapInner('<del></del>');
    } else {

      var firstDisplay = display.parent().children().first();
      console.log(firstDisplay.html())
      if (display.is('del')) { // this is failing
        firstDisplay.unwrap();
      }
    }
  });
});

这是我的 HTML 代码

$(function(){

  $('.custom_delete_file:checkbox').click(function(e){
    var self = $(this);
    var display = self.closest('.input-width-input').find('.custom_delete_file_name > p');

    if (self.is(':checked')) {
      display.wrapInner('<del></del>');
    } else {

      var firstDisplay = display.parent().children().first();
      console.log(firstDisplay.html())
      if (display.is('del')) { // this is failing
        firstDisplay.unwrap();
      }
    }
  });
});

        body {
            padding-top: 65px;
            padding-bottom: 20px;
        }

        /* Set padding to keep content from hitting the edges */
        .body-content {
            padding-left: 15px;
            padding-right: 15px;
        }

        /* Override the default bootstrap behavior where horizontal description lists
           will truncate terms that are too long to fit in the left column.
           Also, add a 8pm to the bottom margin
        */
        .dl-horizontal dt {
            white-space: normal;
            margin-bottom: 8px;
        }

        /* Set width on the form input elements since they're 100% wide by default */
        input,
        select,
        textarea,
        .input-width-input {
            max-width: 380px;
        }

        .uploaded-file-name {
            max-width: 310px;
        }

        .help-block-standard {
            display: block;
            margin-top: 5px;
            margin-bottom: 10px;
            color: #737373;
        }

        /* Vertically align the table cells inside body-panel */
        .panel-body .table > tr > td
        {
            vertical-align: middle;
        }

        .panel-body-with-table
        {
            padding: 0;
        }

        .mt-5 {
            margin-top: 5px !important;
        }

        .mb-5 {
            margin-bottom: 5px !important;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="http://laravel54.dev/assets/asset/6" accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="UA428wC4vxZgb9OmNCGBIkosCN4KuS49VgFiUTET">
            <input name="_method" type="hidden" value="PUT">
            <div class="form-group ">
    <label for="name" class="col-md-2 control-label">Name</label>
    <div class="col-md-10">
        <input class="form-control" name="name" type="text" id="name" value="Some new test" minlength="1" maxlength="255" required="true" placeholder="Enter name here...">
        
    </div>
</div>


<div class="form-group ">
    <label for="notes" class="col-md-2 control-label">Notes</label>
    <div class="col-md-10">
        <textarea class="form-control" name="notes" cols="50" rows="10" id="notes" maxlength="1000"></textarea>
        
    </div>
</div>



<div class="form-group " style="margin-bottom: 5px;">
    <label for="picture" class="col-md-2 control-label">Picture</label>
    <div class="col-md-10">
        <div class="input-group uploaded-file-group">
            <label class="input-group-btn">
                <span class="btn btn-default">
                    Browse <input type="file" name="picture" id="picture" class="hidden">
                </span>
            </label>
            <input type="text" class="form-control uploaded-file-name" readonly>
        </div>

            <div class="input-group input-width-input">

                <span class="input-group-addon">
                    <input type="checkbox" name="custom_delete_picture" class="custom_delete_file"> Delete
                </span>

                <span class="input-group-addon custom_delete_file_name">
                    <p>uploads/zCmPgC5yMor77DaM50nTTnSnxh4y75e7B06WUFFM.jpeg</p>
                </span>
            </div>
        </div>
        
        
    </div>
</div>



                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input class="btn btn-primary" type="submit" value="Update">
                    </div>
                </div>
            </form>

Answer 1

也许是这样的？

var del = display.children().first();

console.log(del)

if (del.is('del')) {
    del.contents().unwrap();
}

del 元素应该是 display 的第一个子元素。我使用了 console.log(del)，因为使用 html() 可以有效地为您提供 innerHTML，这并不是特别有用。

在您的原始代码中，display 是您的 p 元素，这一行只是“向上一个，向下一个”，最后回到 p :

var firstDisplay = display.parent().children().first();