段落旁边有一个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>
答案 0 :(得分：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();
答案 1 :(得分：1)
这是你答案的解决方案。
$(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;
并切换它。 这是最好的方法。
答案 2 :(得分：1)
一种不同的方法......解包的内容，只是用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());
}
});
我希望它有所帮助