Javascript、jquery 添加和删除-6ren

Javascript、jquery 添加和删除

转载作者：行者123 更新时间：2023-11-30 11:46:26

我有这个 javascript 代码，当有人在文本区域中输入文本并单击“追加 A”或“追加 B”按钮时，我想在生活故事的开头或结尾追加一段文本。我还想在单击删除按钮时删除列表中的最后一段。

var par;
$(document).ready(function () {
    
   $(document).on('click', 'a', function(e){
       e.preventDefault;
        if($(this).text() === "Add Though") {
            $(this).text("Hide");
            $(document).find($(this).attr('data-target')).fadeIn(2000).show();
        }
        else if ($(this).text() === "Show full story") {
            $(this).text("Hide some");
            $(document).find($(this).attr('data-target')).fadeIn(1800).show();
        }
        else if ($(this).text() === "Hide some") {
            $(this).text("Show full story");
            $(document).find($(this).attr('data-target')).slideDown().hide();
        }
        else {
            $(this).text("Add Though");
            $(document).find($(this).attr('data-target')).slideUp().hide();
        }
    });
    
    document.getElementById("delete").onclick = dele ;

});

  var dele = function () {
    var par = $("story").getElementsByTagName("p");
    var getStory = $("story");
    var size = par.length;
    if (size > 0) {
         getStory.removeChild(par[size - 1]);
    }
};

body {
    width: 80%;
    align-content: center;
    margin: auto;
    border: solid gray;
    
}
#nlist {
    text-align: center;
    font-family: inherit;
    background-color: gray;
    text-transform: uppercase;
    font-size: 23px;
    align-content: center;
}

#nlist a:hover {
    color: white;
}

#header {
    text-align: center;
    font-family: fantasy;
    font-size: 100%;
    height: 10%;
}

article {
    text-align: center;
    text-align: left;
}

article img {
    float: right;
    margin: 3em 0 1em 1em;
    width: 20%;
    border: 1px solid black;
}
section{
    text-align: center;
    padding: 10px;
    
}

div.hide {
    display: none;
}

#newText {
    width: 100%;
    height: 50px;
}

div.newStory {
    display: none;
    width: 60%;
    padding:10px;
    border: 1px solid gray;
}

div.buttions, div.add {
    padding: 5px 2px 1px 2px;
}

div.style {
    padding: 2px 0px 4px 0px;
}

#page {
    display: none;
}

<!DOCTYPE html>
 <meta charset="UTF-8">
        <title>Life Story</title>
	<link rel="stylesheet" href="style/Style.css">
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="jScript/javaScript.js"></script>
        <style>
	
		#page-wrap { width: 60%; margin: 80px auto; position: relative; }
	
		#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }

		#l, #r { width: 49%; }
		#l { float: left; }
		#r { float: right; }
		
		#l:before, #r:before { content: ""; width: 125px; height: 250px; }
		
		#l:before { float: right; }
		#r:before { float: left; }
	
	</style>
        
    </head>
    <body>
        <header id="header">
            <div>
                <hgroup id="hgroup">
			<h1><a id="h">LIFE STORE</a></h1>
		</hgroup>
            </div>
        </header>
        <div id="ndiv">
            <nav id="nlist">
                <a href="#store" style="text-decoration: none">Story</a> 
                <a href="#carrer" style="text-decoration: none">Career</a> 
                <a href="#deu" style="text-decoration: none">Education</a>
                <a href="#contact" style="text-decoration: none">Contact</a>
            </nav>
        </div>
        <section>
            <h1> <a id="store">Coming To United State</a></h1>
            <article>
                <div id = "story">
                    <p>Gates’s father could have spoken out, when Mr. Wilson did not addressed him properly at the Cut-Rate Drug Store by called he George.  Addressed someone in-properly is an insult in today world, but we all know the old history, back in the day, people dealt with racial differences by drawing a strict line between white people and black people.</p>
                <p>Wilson started addressed he George because of the incident that happen between them. I remember When I first came to the United sated, and I was playing for my high school, Ganger. I was a running back, one day, we were practicing and one of my teammate call me black monkey.  
                </p>
                <p>Sometime letting things go can solve the problem and something it does not. But if something like that happen to me today, I will definitely respond, but in a good way by telling the person not to call me that again.  <a id ="full" href="#" data-target ="#fullStory" 
                                                        style="text-decoration: none">Show full story</a> 
                </p>
                </div>
                <div class = "hide" id = "fullStory">
                    <p>I lived in Africa for sixteen years, but the four years I have spent in United States
                    have taught me more the previous sixteen years I did in Africa, so much more.
                    Someone once told me that love is spending time with people and doesn’t care about
                    being annoyed. Ms. Fosdal took me out of darkness and brought me to light by teaching
                    me how to read, communicate, and write the English language. I think she is the
                    perfect example that fits the definition. I  believe that majority of people around
                    the globe have encounter difficulties in life, in order for them to achieve the goals
                    they set for themselves. Nevertheless, I thought that my problem was the most 
                    difficult one.</p>
                    <p>So now you know how my new life in the United States has taught me to overcome problems
                    and taught me to help others. I have seen myself in a better position through what I
                    have learned in this great country. I have learned how to build computers and navigate
                    the Internet which I never knew before. Moreover, I believe that the longer I stay in
                    the United States, the better I will become.</p></div>
                <div class = "newStory" id = "addNote">
                    <div class= "style">
                        <select id="family" name="fonts">
                        <option value="1">Arial</option>
                        <option value="2">Times New Roman</option>
                        <option value="3">Helvetica</option>
                        <option value="4">Calibri</option>
                        <option value="5">Apple Chancery</option>
                        <option value="6">MingLiU_HKSCS</option>
                    </select>
                        <select id="size" name="fonts">
                        <option value="1">11</option>
                        <option value="2">12</option>
                        <option value="3">14</option>
                        <option value="4">16</option>
                        <option value="5">18</option>
                        <option value="6">20</option>
                    </select>
                        <input type= "button" id = "bold" value = "Bold Text">
                        <input type= "button" id = "itali" value = "Italics">
                    </div>
                    <textarea id= "newText">Enter some text</textarea>
                    <div class= "buttions">
                        <input type= "button" id = "bButton" value = "Append At B">
                        <input type= "button" id = "aButton" value = "Append At A">
                        <input type= "button" id = "delete" value = "Delete Last Paragraph">
                    </div>
                </div>
                <div class ="add">
                    <nav id="thing">
                        <a href="#comment" data-target ="#addNote" style="text-decoration: none">Add Though</a>
                    </nav>
        </div>
                
            </article>
        </section>
    </body>
</html>

追加、删除按钮和文本区域都被隐藏了。当您单击底部的 Add Though 时，它们将可见。

这是我要删除的内容，但它不起作用

  var dele = function () {
    var par = $("story").getElementsByTagName("p");
    var getStory = $("story");
    var size = par.length;
    if (size > 0) {
        getStory.removeChild(par[size - 1]);
    }
};

我没有任何附加文本。

最佳答案

这个附加新文本和删除最后文本的解决方案怎么样。希望有帮助。

var par;
$(document).ready(function () {
    
     $(".myClass").click(function(){
         
        if($(this).prop("id") === "bButton"){          
           $("#myText").append("<p>" + $("#newText").val() + "</p>");
            $('#newText').val('');
        }
        else if($(this).prop("id") === "aButton"){
            $("#myText").append("<p>" + $("#newText").val() + "</p>");
            $('#newText').val('');
        }
        else if($(this).prop("id") === "delete"){
             $("#myText").find("p").last().remove();
             $('#newText').val('');
        }       
       });
    
   $(document).on('click', 'a', function(e){
       e.preventDefault;
       
        if($(this).text() === "Add Though") {
            $(this).text("Hide");
            $(document).find($(this).attr('data-target')).fadeIn(2000).show();
        }
        else if ($(this).text() === "Show full story") {
            $(this).text("Hide some");
            $(document).find($(this).attr('data-target')).fadeIn(1800).show();
        }
        else if ($(this).text() === "Hide some") {
            $(this).text("Show full story");
            $(document).find($(this).attr('data-target')).slideDown().hide();
        }
        else {
            $(this).text("Add Though");
            $(document).find($(this).attr('data-target')).slideUp().hide();
        }
    });
});

   body {
    width: 80%;
    align-content: center;
    margin: auto;
    border: solid gray;
    
}
#nlist {
    text-align: center;
    font-family: inherit;
    background-color: gray;
    text-transform: uppercase;
    font-size: 23px;
    align-content: center;
}

#nlist a:hover {
    color: white;
}

#header {
    text-align: center;
    font-family: fantasy;
    font-size: 100%;
    height: 10%;
}

article {
    text-align: center;
    text-align: left;
}

article img {
    float: right;
    margin: 3em 0 1em 1em;
    width: 20%;
    border: 1px solid black;
}
section{
    text-align: center;
    padding: 10px;
    
}

div.hide {
    display: none;
}

#newText {
    width: 100%;
    height: 50px;
}

div.newStory {
    display: none;
    width: 60%;
    padding:10px;
    border: 1px solid gray;
}

div.buttions, div.add {
    padding: 5px 2px 1px 2px;
}

div.style {
    padding: 2px 0px 4px 0px;
}

#page {
    display: none;
}
    
    
    
    #page-wrap { width: 60%; margin: 80px auto; position: relative; }
	
		#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }

		#l, #r { width: 49%; }
		#l { float: left; }
		#r { float: right; }
		
		#l:before, #r:before { content: ""; width: 125px; height: 250px; }
		
		#l:before { float: right; }
		#r:before { float: left; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header id="header">
            <div>
                <hgroup id="hgroup">
			<h1><a id="h">LIFE STORE</a></h1>
		</hgroup>
            </div>
        </header>
        <div id="ndiv">
            <nav id="nlist">
                <a href="#store" style="text-decoration: none">Story</a> 
                <a href="#carrer" style="text-decoration: none">Career</a> 
                <a href="#deu" style="text-decoration: none">Education</a>
                <a href="#contact" style="text-decoration: none">Contact</a>
            </nav>
        </div>
        <section>
            <h1> <a id="store">Coming To United State</a></h1>
            <article>
                <div id = "story">
                    <p>Gates’s father could have spoken out, when Mr. Wilson did not addressed him properly at the Cut-Rate Drug Store by called he George.  Addressed someone in-properly is an insult in today world, but we all know the old history, back in the day, people dealt with racial differences by drawing a strict line between white people and black people.</p>
                <p>Wilson started addressed he George because of the incident that happen between them. I remember When I first came to the United sated, and I was playing for my high school, Ganger. I was a running back, one day, we were practicing and one of my teammate call me black monkey.  
                </p>
                <p>Sometime letting things go can solve the problem and something it does not. But if something like that happen to me today, I will definitely respond, but in a good way by telling the person not to call me that again.  <a id ="full" href="#" data-target ="#fullStory" 
                                                        style="text-decoration: none">Show full story</a> 
                </p>
                <span id = "myText"></span>
                </div>
                <div class = "hide" id = "fullStory">
                    <p>I lived in Africa for sixteen years, but the four years I have spent in United States
                    have taught me more the previous sixteen years I did in Africa, so much more.
                    Someone once told me that love is spending time with people and doesn’t care about
                    being annoyed. Ms. Fosdal took me out of darkness and brought me to light by teaching
                    me how to read, communicate, and write the English language. I think she is the
                    perfect example that fits the definition. I  believe that majority of people around
                    the globe have encounter difficulties in life, in order for them to achieve the goals
                    they set for themselves. Nevertheless, I thought that my problem was the most 
                    difficult one.</p>
                    <p>So now you know how my new life in the United States has taught me to overcome problems
                    and taught me to help others. I have seen myself in a better position through what I
                    have learned in this great country. I have learned how to build computers and navigate
                    the Internet which I never knew before. Moreover, I believe that the longer I stay in
                    the United States, the better I will become.</p></div>
                <div class = "newStory" id = "addNote">
                    <div class= "style">
                        <select id="family" name="fonts">
                        <option value="1">Arial</option>
                        <option value="2">Times New Roman</option>
                        <option value="3">Helvetica</option>
                        <option value="4">Calibri</option>
                        <option value="5">Apple Chancery</option>
                        <option value="6">MingLiU_HKSCS</option>
                    </select>
                        <select id="size" name="fonts">
                        <option value="1">11</option>
                        <option value="2">12</option>
                        <option value="3">14</option>
                        <option value="4">16</option>
                        <option value="5">18</option>
                        <option value="6">20</option>
                    </select>
                        <input type= "button" id = "bold" value = "Bold Text">
                        <input type= "button" id = "itali" value = "Italics">
                    </div>
                    <textarea id= "newText" placeholder="Enter some text"></textarea>
                    <div class= "buttions">
                        <input type= "button" class = "myClass" id = "bButton" value = "Append At B">
                        <input type= "button" class = "myClass" id = "aButton" value = "Append At A">
                        <input type= "button" class = "myClass" id = "delete" value = "Delete Last Paragraph">
                    </div>
                </div>
                <div class ="add">
                    <nav id="thing">
                        <a href="#comment" data-target ="#addNote" style="text-decoration: none">Add Though</a>
                    </nav>
        </div>
                
            </article>
        </section>

关于Javascript、jquery 添加和删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40856613/

文章推荐： javascript - 计算表格中具有特定单元格内容的行数

文章推荐： java - Javolution:在迭代 FastSet 时删除

文章推荐： javascript - 如何获取<input>上传的图片大小

文章推荐： javascript - 无法计算总时数

iPhone:删除/删除 SQLite 数据库？
我知道如何通过iPhone开发创建sqlite数据库、向其中插入数据、删除行等，但我试图以编程方式删除整个数据库本身，但没有得到任何帮助。请有人指导我如何通过代码从设备中删除/删除整个 sqlite
teradata - 删除/删除 Teradata 中的数据库
请帮助指导如何在 Teradata 中删除数据库。当我运行命令DROP DATABASE database_name时，我收到错误消息: *** Failure 3552 Cannot DROP d
azure - 删除/删除 Azure 警报规则
Azure 警报规则的删除命令似乎不起作用，尝试了下面的方法，它返回状态为无内容，并且警报未被删除使用的命令Remove-AzAlertRule -ResourceGroup "RGName"-Na
elasticsearch - Elasticsearch 数据丢失/删除/删除
我在 flex 搜索中为大约50000个视频建立了索引，但是当它达到52000左右时，所有数据都被删除。嗯，这对我来说真的很奇怪，我没有为ES设置任何Heap大小或最小或最大大小的内存大小，因此它们没
python - Django:删除/删除 slug
我正在处理的问题是表单错误“输入由字母、数字、下划线或连字符组成的有效‘slug’。” 以下是我的表单字段验证: def clean_slug(self): slug = self.c
jQuery 删除 : $ ("..."). 删除() 与 .remove ("...")
阅读文档，我希望 $("#wrap2").remove(".error") 从中删除所有 .error 元素#wrap2。然而看看这个 JSFiddle: http://jsfiddle.net/h
php - 删除/删除 laravel 项目
嗨，我第一次尝试发现 laravel 我从 laravel 4.2 开始，我刚刚创建了一个新项目，但我误以为我写了这样的命令行 composer create-project laravel/lara
Apache 2.4 - 删除 |删除 |卸载
我已经在网上搜索了很长一段时间，但我找不到如何完全删除 apache 2.4 。使用: Windows 7 c:\apache24\ 我已经尝试了所有命令，但没有任何效果。 httpd -k shu
python - 删除/删除 pandas DataFrame 中任意列中具有特定字符串的行
可能是一个简单的答案，所以提前道歉(最少的编码经验)。我正在尝试从任何列中删除具有特定字符串(经济 7)的任何行，并且一直在尝试离开此线程: How to drop rows from pandas
c++ - 删除/删除 vector 项的最有效/最快的方法
有几种方法可以删除/移除 vector 中的项目。我有一个指针 vector ，我需要在类的析构函数中删除所有指针。什么是最有效/最快甚至最安全的方式？ // 1º std::for_each(v
linux - 删除 xinetd 导致 plesk 删除
我安装了一个 VNC 服务器并在某处阅读了我必须安装 xinetd 的信息。稍后我决定删除 VNC 服务器，所以我也删除了 xinetd。似乎 xinetd 删除了一些与 plesk 相关的文件，如果
android - 如何完全杀死/删除/删除/停止 AsyncTask
我制作了一个从我们的服务器下载视频的应用。问题是: 当我取消下载时，我打电话: myAsyncTask.cancel(true) 我注意到，myAsyncTask 并没有在调用取消时停止...我的 P
machine-learning - 删除/删除 Vertica 中的机器学习模型(如果存在)
是否可以在使用DELETE_MODEL删除模型之前检查模型是否存在我试图避免在尝试删除尚未创建的模型时收到错误消息。基本上我正在寻找对应的: DROP TABLE IF EXISTS 但对于模型。最
php - 如何使用 php 删除/删除 mySQL 中的特定表行？
我已经有了这个代码: 但它仍然会生成一个表行条目。我想做的是，当输入的数量为0时，表行将被删除。请耐心等待，因为我是 php 和 mySQL 编码新手。最佳答案您忘记执行查询。应该是 $que
c# - 删除 EWS 中的 Exchange 事件修改/删除(即恢复事件)
在 SharePoint 中，如果您删除/修改重复日历条目的单次出现，则不会真正删除/修改任何内容 - 相反，会创建一个新条目，告诉 SP 对于特定日期，该事件不存在或具有新参数. 因此，这可以通过删
javascript - Laravel 5.2 & Dropzone.js - 删除(删除)上传的图片
在 routes.php 中我有以下路由: Route::post('dropzone', ['as' => 'dropzone.upload', 'uses' => 'AdminPhotoContr
Node.JS app.get 错误..无法获取/删除/删除/15
在我的应用程序中，我正在尝试删除产品。当我第一次删除产品时，它会成功并且 URL 更改为/remove_category/15。我正在渲染到同一页面。现在，当我尝试删除另一个产品时，网址更改为/rem
bash - 匹配后如何使用 BSD/OS X sed 删除/删除 X 行
这个问题被问了很多次，但给出的答案都是 GNU sed 特定的。 sed -i '' "/${FIND}/,+2d""$FILE" 给出“预期的上下文地址”错误。有人可以给我一个例子，说明如何使用
javascript - Google Maps JavaScript API V3 - 卸载/解构/删除/删除
在使用 V3 API 时，我找不到任何方法来删除和清理 Google map 。我已经在 AJAX 站点中运行它，所以我想完全关闭它而无需重新加载页面。我希望有一个 .unload() 或 .de
sql-server - 如何创建一个可以创建/更改/删除 View 但不能表、可以读取数据但不能插入/更新/删除/截断数据的 Azure SQL 数据库用户？
是否可以创建一个 Azure SQL 数据库用户来执行以下操作: 针对所有表和 View 进行 SELECT 创建/更改/删除 View 但用户不应该不拥有以下权限: 针对任何表或 View 插入/更

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript、jquery 添加和删除