如何檢查jquery元素是否是`del`標記？

Question

我在段落旁邊有一個HTML復選框。 當用戶選中該框時，我想使用css bootstrap對段落進行刪除。

要添加刪除，我應該用<del></del>標記包裝段落。

當選中該框時，我能夠使用<del></del>正確包裝段落。 但是，當用戶取消選中該框時，我無法刪除<del></del>標記。

我的代碼似乎無法檢查元素是否為del 。

我創建了一個小提琴手，向您展示正在發生的事情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 is元素應該是display的第一個子元素。 我使用了console.log(del)因為使用html()實際上是為了給你innerHTML ，這沒什么特別的幫助。

在原始代碼中， display是你的p元素，這行只是“向上一個，向下一個”，最后回到p ：

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

Answer 2

這是您的答案的解決方案。

$(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 {

      $(".custom_delete_file_name:eq(0) p").html($(".custom_delete_file_name:eq(0) p del").html());     
    }
  });
});

但請記住，您不必用標簽包裹它以使其通過。 您只需添加css類或樣式屬性即可

text-decoration: line-through;

並切換它。 這是最好的方法。

Answer 3

一種不同的方法......解包的內容，只是用del內的內容再次覆蓋p ...

$('.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 {
        display.html(display.find('del').text());
    }
});

我希望它有所幫助